How can I preserve query parameters with Redux and react router?

Question

I'm using React router and i would like to be able to send links or share it but everytime i realload the page, the state is becoming empty

http://localhost:3000/project/element=7/userid=9/exercises

If i enter this query in the url the state will not be preserved.

Here is my code:

<Route
    exact
    path="/project/element=:elementId/userid=:userid/exercises"
    component={Exercises}
    key={`exercises-id`}
/>

I tried to:

 <Link to="/project/element=:elementId/userid=:userid/exercises" query={this.props.query}

But it's not preservering the state of my userId and elementId.

Here is the route:

<Route
    exact
    path="/project/element=:elementId/userid=:userid/exercises"
    component={Exercises}
    key={`exercises-id`}
/>

Thanks for the help

Where do you want to persist it? Your component Exercises will receive the parameters and theoretically could persist them. — dmigo
– dmigo, Commented Oct 14, 2019 at 9:13
Yes in the exercises component, but i'm not sure how to do it — Yannis
– Yannis, Commented Oct 14, 2019 at 9:15
@Yannis just FYI /element=7/userid=9/ is a really weird way to mix query params syntax and path params syntax. The convention is to do either /elements/7/user/9 oder have both as query params: /project/exercises?element=<elementId>&user=<userId>. — timotgl
– timotgl, Commented Oct 14, 2019 at 12:15

imLohith · Accepted Answer · 2019-10-15 10:50:52Z

1

path="/project/element=:elementId/userid=:userid/exercises"

Should be

path="/project/element/:elementId/userid/:userid/exercises" inside

answered Oct 14, 2019 at 9:20

imLohith

2292 gold badges4 silver badges15 bronze badges

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

2 Comments

Your path correction is wierd, did you forgot the first "query parameter" (element=:elementId) ?

oh...My bad @Darkilen