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)
You use parenthesis ( ) to wrap the optional parts of route, including the leading slash ( / ). Check out the Route Matching Guide page of the official documentation. Note: The :paramName parameter matches a URL segment up to the next / , ? , or # .
The <SearchInput/> will get a history using the useHistory Hook, which is provided by “react-router-dom” library. Inside the component we will set URL parameters using URLSearchParams in the useEffect Hook. The Hook should have a state as a dependency to update query parameters after each state update.
Firstly wrap all the content of your page inside the return function inside the . Next, create the induvial routes inside the component. For each route, we have the path and the element props, these tell the path on the address bar and the component to be rendered out respectively.
Basically, you can use the ? character to make the parameter optional.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With