Syntax to add dynamic parameter in react js [duplicate]

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 : reactrouter.com/web/api/Route/path-string-string — ridoansaleh
– ridoansaleh, Commented Jul 28, 2020 at 7: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
– Sakshi, Commented Jul 28, 2020 at 7:37

Wiktor Bednarz · Accepted Answer · 2020-07-28 08:36:31Z

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, 2020 at 8:36

Wiktor Bednarz

7493 silver badges7 bronze badges

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

6 Comments

Sakshi Over a year ago

what you wrote in <Link/> I wish similar code in <Route exact path/> Is there a way to do that directly without using <Link to/>

Wiktor Bednarz Over a year ago

Why, there's no use-case for it? The route with path "/verify-email" is already capable of reading all the query params.

Sakshi Over a year ago

Thanks. Found the value in props.location.search. Understood your answer and concept by practically writing your answer in my code!

Wiktor Bednarz Over a year ago

Glad I could help

Sakshi Over a year ago

hey! getting unidentified on <span>{key is ${key} and id is ${eid}}</span> on setting const { key, eid } = new URLSearchParams(window.location.search) but in console, getting window.location.search correct query value

|

Vasanth Gopal · Accepted Answer · 2020-07-28 08:08:01Z

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, 2020 at 8:08

Vasanth Gopal

1,28510 silver badges11 bronze badges

1 Comment

Sakshi Over a year ago

These values can't be hardcoded or come from a state. In app.js, I wish to hit the url: localhost:3000/… 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?

Collectives™ on Stack Overflow

Syntax to add dynamic parameter in react js [duplicate]

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related