7

I have a path as

 <Route path="/account/:accountid/LoginPage"
      component={LoginPage}/>

This works fine if the url is -> /account/12332/LoginPage. I want to have optional query parameters. Url structure would be something as

/account/12322/LoginPage?User=A&User=B

I have modified the path as

<Route path="/account/:accountid/LoginPage(/:User)"
      component={LoginPage}/>

after this if I try to access the url it does not redirect me to the appropriate page instead it throws an error as

useBasename.js:56 Uncaught TypeError: history.getCurrentLocation is not a function
    at Object.getCurrentLocation (useBasename.js:56)
    at Object.getCurrentLocation (useQueries.js:64)
    at Object.listen (createTransitionManager.js:246)
    at Object.componentWillMount (Router.js:97)
    at ReactCompositeComponent.js:347
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:346)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
2
  • Possible duplicate of React Router with optional path parameter Commented Jul 11, 2017 at 7:22
  • I tried but it didnot solve my problem Commented Jul 11, 2017 at 13:53

1 Answer 1

11

As of react-router v4 (latest version), it does not support query params (? user=nerve&name=no-one). It does support URL params though. There is a GitHub issue discussing the same point. Go ahead and read it, there are some good solutions but nothing baked right into the core library.

A workaround that I usually implement is adding multiple routes that render the same component.

<Route exact path='/' component={ HomePageConnector } />
<Route exact path='/search/:searchTerm' component={ HomePageConnector } />

Edit

The only issue with v4, as I understand, is that it NO LONGER exposes the location.query object. However, you still have access to location.search (which is a STRING, not an object). You can read this string and pass it to a library like query-string to get a more meaningful object out of it. This way, you can continue to use query parameters rather than URL params. This information is already written in the GitHub issue but is a little scattered across comments. Something like (though not tested):

Routes:

<Route exact path='/test' component={HomePageConnector} />

Fetching the params in component:

const parseQueryString = require('query-string');

let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);
Sign up to request clarification or add additional context in comments.

2 Comments

This seems to be good for single route ...what if i had similar situation for multiple routes how can i solve the same
I am new to reactjs.....now i didn't know how to use your answer....kindly help me

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.