CODEWITHSUNDEEP
reactjsreact-router
Max
Max

Reputation: 661

React Router 3, exactly match against query param

In React Router 3, how do you match exactly against a route containing query params?

Something like this,

<Route path="about?qs1=:qs&qs2=:qs2" component={About} />

Upvotes: 2

Views: 1999

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18546

Query params are not part of a route in that sense. You will need to check for them inside your component, for example like this:

class About extends React.Component {
  render() {
    return(
      <div>
        {this.props.location.query.qs1 ? 'Correct route!' : 'Invalid route!'}
      </div>
    );
  }
}

You could also check for the query params inside componentDidMount and redirect your users to a different route (e.g. 404). Read more about Route Matching in the official docs.

Upvotes: 2

Related Questions