Query Params in the react router 4

Asked Oct 22 '18 at 13:18

Active Oct 22 '18 at 13:40

Viewed 38 times

I am totally new to the react router.

I have this route

<PrivateRoute exact path="/quiz-setup/:job" component={QuizSetupMain} />

where I set a param as a job. So I do in action like this

history.push({
      pathname: '/quiz-setup',
      search: this.props.selectedJdName
    })

My PrivateRoute ->

return hasUserLogIn ?
    (
      <Route
        {...rest}
        path={path}
        component={Component}
      />
    )
    :
    (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: path }
        }}
      />
    )
};

But now, it is not matching that route. So How can I do this?

edited Oct 22 '18 at 13:40

asked Oct 22 '18 at 13:18

ganesh kaspate

uhh then just set the pathname to `/quiz-setup/${this.props.selectedJdName}` – azium Oct 22 '18 at 13:29
2

To expand on azium's comment, it appears you're trying to use a URL param (`search`) when you've declared a path param – Michael Brewer-Davis Oct 22 '18 at 13:30
Is there any way to get that param ? if user refresh then I want to take that value so, is there any way ? If it is then should I do it in the componentDidMount ? – ganesh kaspate Oct 22 '18 at 13:32
Look at https://reacttraining.com/react-router/core/api/match – Michael Brewer-Davis Oct 22 '18 at 13:34
But because of this, another request which I call, in that also this quiz-setup param is getting added , so its giving me now 404 not found – ganesh kaspate Oct 22 '18 at 13:34
@ganeshkaspate Did you update from react router 3 to react router 4? or is it your first react router project? – c-chavez Oct 22 '18 at 13:37
its my first react router project – ganesh kaspate Oct 22 '18 at 13:39
I have just updated my private Route – ganesh kaspate Oct 22 '18 at 13:40
@c-chavez is there anything wrong with my code ? – ganesh kaspate Oct 22 '18 at 13:55
@ganeshkaspate what happens when you try `history.push('/quiz-setup/' + this.props.selectedJdName)` or `/quiz-setup/${this.props.selectedJdName}`? – c-chavez Oct 22 '18 at 14:00
@ganeshkaspate if I'm not mistaken, your current approach is the old react-router 3 approach. In react-router 4 there is no query string functionality, just params. – c-chavez Oct 22 '18 at 14:10
The solution you have added in a comment has worked. But because of that if some another ali is getting called that time itself then that /quiz-setup is better added in the route. For eg local host :3000/ABC then it changes to the localhost/quiz-setup/ABC – ganesh kaspate Oct 22 '18 at 15:22

Query Params in the react router 4

0 Answers0