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)
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 } />
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);