Passing optional parameter in react router

Question

Say I have http://www.example.com/page/#/search routed like this:

<Router history={hashHistory}>
  <Route path='/search/' component={SearchPage} />
</Router>

And when the user does a search on the page using the provided name and age search boxes (either can be left out, or both can be filled), I want it to redirect to:

http://www.example.com/page/#/search/?name=whatever%20name&age=15

Which will display the results for this particular search. This would also allow linking directly to search results.

Now inside my SearchPage component, how can I check if ?name= or ?age= or any other search parameters have been provided?

Jyothi Babu Araja · Accepted Answer · 2016-12-07 08:36:32Z

1

In your container say SearchPage you can access queryParams like this

this.props.location.query.yourKey.

As an example

class SearchPage extends React.Component{
   componentWillMount(){
     const {name, age} = this.props.location.query;
     //here you can give default values if they are empty
     //do whatever you want
   }
}

answered Dec 7, 2016 at 8:36

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Shukla · Accepted Answer · 2016-12-07 08:43:06Z

There are two ways of achieving this either you can use params or query values.

By params:

In the route first define your optional parameters like this:

<Router history={hashHistory}>
   <Route path='/search(/:name)(/:age)' component={SearchPage} />
</Router>

Include componentWillReceiveProps() method in your component it will get triggered whenever component receive any new props, like this:

componentWillReceiveProps(newProps){
   console.log(newProps.params.name, newProps.params.age);
   // here you can check the props value
}

In the component you can check the value by this.props.params.name or age.

By query parameter:

no change is required in the route, just pass the values in url and check like this:

this.props.location.name or age.

Read this article for about params and query values in react: https://www.themarketingtechnologist.co/react-router-an-introduction/

mohit uprim · Accepted Answer · 2020-06-07 06:20:19Z

With the latest update "location.query" is not exposed, we have to use "location.search" to get the optional unnamed parameters. However, The named optional parameter still can be read through "props.match.params"

Route :

<Route path="/partner/list-space/step-1/:_id?" component={ListSpace}/>

Fetching the named optional parameter "id" in component or hooks

let id = props.match.params._id;

To fetch the unnamed optional parameter such as "space" from the url.

http://localhost:3000/partner/list-space/step-1/123?space=new&guests=4

We have to use "querystringify".

import qs from "querystringify";

const qsParams = qs.parse(props.location.search);

Results :

props.match.params._id => "123" 
qsParams.space => new 
qsParams.guests => 4

Collectives™ on Stack Overflow

Passing optional parameter in react router

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related