Syntax to add dynamic parameter in react js

Question

I need syntax help here in react js,

I wish to achieve something like this in the path

http://localhost:3000/verify-email?key=ffdffae0237c43e6572bca3a3867eda1&eid=c2Frc2hpN0BnbWFpbC5jb20=

The following code doesn't work

<Route name="businessInformation" exact path="/verify-email?key=:someRandomKey&eid=:someRandomKey"> //Need help here

Although, this works for http://localhost:3000/verify-email/:key/:eid

 <Route name="businessInformation" exact path="/verify-email/key/eid">

How shall I append such string values so that it understands?

Because if you want to pass a param to path is simply write `/:paramName`. In your code you also write its value. Please check its documentation here : https://reactrouter.com/web/api/Route/path-string-string — ridoansaleh, Jul 28 '20 at 07:17
I want to achieve something like this instead /verify-email?key=:someRandomKey&eid=:someRandomEmailKey how can I do that? where dynamic values are someRandomKey and someRandomEmailKey — Sakshi, Jul 28 '20 at 07:37

score 1 · Accepted Answer · answered Jul 28 '20 at 08:36

1

Ok, the question is very unclear, for the sake of brevity let's assume that you want to read a query string. The route for this would simply look like:

<Route
    name="businessInformation"
    exact path="/verify-email"
    render={props => <Example {...props}>}
/>

and the component which would need to read the query string would look like:

const Example = () => {
    const { key, eid } =  new URLSearchParams(window.location.search)
    
    return (
        <span>{`key is ${key} and id is ${eid}`}</span>
    )
}

And in case you wanting to navigate to such a route, it would be:

<Link to={`/verify-email?key${key}&eid=${id}`}/>

answered Jul 28 '20 at 08:36

Wiktor Bednarz

701
3
7

what you wrote in I wish similar code in Is there a way to do that directly without using – Sakshi Jul 28 '20 at 09:08
1

Why, there's no use-case for it? The route with path "/verify-email" is already capable of reading all the query params. – Wiktor Bednarz Jul 28 '20 at 09:14
Thanks. Found the value in props.location.search. Understood your answer and concept by practically writing your answer in my code! – Sakshi Jul 28 '20 at 11:01
Glad I could help – Wiktor Bednarz Jul 28 '20 at 11:17
hey! getting unidentified on {`key is ${key} and id is ${eid}`} on setting const { key, eid } = new URLSearchParams(window.location.search) but in console, getting window.location.search correct query value – Sakshi Jul 28 '20 at 13:53
Maybe my desctructuring is a bit off. Try to declare the query as a constant, and then log it to check what is the shape of the query: `const query = new URLSearchParams(window.location.search)`. – Wiktor Bednarz Jul 28 '20 at 14:20

score 0 · Answer 2 · answered Jul 28 '20 at 08:08

0

This is query string

"?var1=val&var2=val2"

And, this is URL parameters

/api/:param1/edit

To achieve query string with dynamic values, I would suggest to use template literats

const someRandomKey = "<random_key>"; // Either hard-code any value or read from a state / props. 
const someRandomId = "<random_id>";
<Route name="businessInformation" exact path=`/verify-email?key=${someRandomKey}&eid=${someRandomKey}`>

answered Jul 28 '20 at 08:08

Vasanth Gopal

1,215
10
11

These values can't be hardcoded or come from a state. In app.js, I wish to hit the url: http://localhost:3000/verify-email?key=ffdffae0237c43e6572bca3a3867eda1&eid=c2Frc2hpN0BnbWFpbC5jb20= where key and eid are dynamic values. This link will be coming from user's email to verify. How shall I route this in app.js? – Sakshi Jul 28 '20 at 09:03

Syntax to add dynamic parameter in react js

2 Answers2