Getting url parameter from react to node

Question

I have a node server running on localhost:5000 and I'm able to get a hash sent in the url with the following code:

app.get('/:hash', function(req, res) {
  const id = req.params.hash;
});

I then also have a front end react app running on http://localhost:3000, and a proxy setup in package.json, but when I vistor http://localhost:3000/somehash I'm not able to retrieve the value some hash. Is there a step I'm missing to be able to get that value from react and pass it to node?

Thanks!

Background: I'm creating a url shortener. User visits the react app and inputs a url to be shortened. Node returns a hash the user can use and share with others. Users who are given the hash url can visit and be redirected to the original url. Works fine on localhost:5000(node) but doesn't work on localhost:3000 (react). For some reason node isn't picking up the hash from react when the user first visits the page.

What are you trying to do? The frontend is on port 3000. To get the result from the backend you must use the backend port, which is 5000. — vmf91
– vmf91, Commented Feb 3, 2019 at 13:34
Thanks for the reply. I'm creating a url shortener so when the user submits a url on the front end it's passed to the back end and returns a hash to the front end. The user can then share this hash and when users visit it, it'll redirect to the original url. A bit like goo.gl or bitly. The bit I'm struggling with is when the user visits the short url with the hash. I can't get node to identify the hash in the url from the react app. Hopefully that makes sense — Stephanie Parker
– Stephanie Parker, Commented Feb 3, 2019 at 13:39

vmf91 · Accepted Answer · 2019-02-03 13:50:22Z

1

You must configure a route to receive the hash on react too. Then, the react code can fetch the backend and get the URL from the hash. And only then, the react can perform the redirection with window.location = URL

If you are using react-router-dom you can create the route like this:

<Route path="/app/:hash" exact component={YourComponent} />

Then, in YourComponent you can get the hash like this:

const {hash} = this.props.match.params;

edited Feb 3, 2019 at 13:50

answered Feb 3, 2019 at 13:44

vmf91

1,94722 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vmf91 Over a year ago

I have added some code to illustrate how to pass a URL parameter to a component. I hope this helps you.

molamk · Accepted Answer · 2019-02-03 13:42:15Z

1

Your backend is listening on port 5000 not 3000.

When you navigate to localhost:3000/somehash, you're asking your frontend to load the page somehash which needs to correspond to a route in React.

If you want to access the server's API on port 5000 through your React app on port 3000, you need to write the corresponding feature. For example an HTTP request to your localhost. It may look like this

// SomewhereInYourReactApp.js

const someHash = 'hello_world';

fetch(`localhost:3000/${someHash}`)
  .then(response => response.json())
  .then(myJson => {
    console.log(JSON.stringify(myJson));
});

answered Feb 3, 2019 at 13:42

molamk

4,1161 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Getting url parameter from react to node

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related