CODEWITHSUNDEEP
javascriptreactjsparametersreact-routeroptional-parameters
Mahi
Mahi

Reputation: 21893

Passing optional parameter in react router

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?

Upvotes: 2

Views: 3161

Answers (3)

mohit uprim
mohit uprim

Reputation: 5334

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

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104379

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/

Upvotes: 1

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

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
   }
}

Upvotes: 1

Related Questions