Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set route with optional query parameter using React router?

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)
like image 517
Geeky Avatar asked Jul 11 '17 06:07

Geeky


People also ask

How do you pass optional parameters in react router?

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 # .

How do I add a query parameter to a route in react?

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.

How do you conditionally route in react?

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.

Which character lets us create optional route params?

Basically, you can use the ? character to make the parameter optional.


1 Answers

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);
like image 193
Nerve Avatar answered Sep 28 '22 09:09

Nerve