React Router: Query Param Match?

Question

According to the accepted answer to this question, React Router 4 doesn't match query parameters anymore. If I go from a URL matched by one of my <Route>s to the same URL with a different query string, the content doesn't seem to change. I believe this is because navigating between URLs that match the same <Route> doesn't change the content, but please correct me if I'm wrong. Given this, how do I use React Router for a set of URL's that need to differ only by query parameter?

For example, many search engines and other sites that use search bars, including the site I am working on, use a query parameter, commonly q or query. The user may search for one thing, then decide that is not what he/she wants and search for another thing. The user may type in the second URL or search with the search bar again. There isn't really a place for the search term in the URL path, so it kind of needs to go in the query string. How do we handle this situation?

Is there a way, with React Router, to link to a URL that only differs in the query string and change the content, without refreshing the entire page? Preferably, this wouldn't require any external library besides React and React Router.

can u provide some code so i ts easier to see what your trying to do — Omar K
– Omar K, Commented Apr 9, 2018 at 1:06
Sorry, I was doing this on my phone at night while going home from vacation. (I wasn't the one driving.) My components are also just a little more complex than react tutorials, but I will try to get a demo up. — trysis
– trysis, Commented Apr 9, 2018 at 23:40

JJPandari · Accepted Answer · 2018-04-09 08:53:20Z

6

Try the render function prop instead of component prop of Route. Something like this:

<Route render={props => {
  // look for some param in the query string...
  const useComponentA = queryStringContains('A');
  if(useComponentA) {
    return <ComponentA {...props}/>;
  } else {
    return <ComponentB {...props}/>;
  }
}}/>

answered Apr 9, 2018 at 8:53

JJPandari

3,5221 gold badge19 silver badges25 bronze badges

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

4 Comments

trysis Over a year ago

I am doing this with some other components. I didn't think about it for this situation. Even if I did, I wouldn't have thought it would work, but it does!

JJPandari Over a year ago

@AmerllicA I don't quite understand you, are you asking whether my answer actually works? I didn't use this myself, you can ask the OP how this goes in his project.

theprogrammer Over a year ago

what is this queryStringContains method? which file are you importing it from? react-router?

JJPandari Over a year ago

@theprogrammer It's some pseudo code, means you should expand it to a few lines which do what this function name describes. To be more direct, swap out queryStringContains('A') with something like window.location.search.includes('A')

Eric Tan · Accepted Answer · 2019-07-27 21:59:32Z

There are 2 ways to do that:

1) Use location.search in react component to get the query string, then pass it to child component to prevent re-rendering the whole component. React-router has the official example about this.

2) Define a regex path of router to catch the query string, then pass it to react component. Take pagination as an example:

routes.js, for router config you can refer this

const routerConfig = [
  {
    path: '/foo',
    component: 'Foo',
  },
  {
    path: '/student/listing:pageNumber(\\?page=.*)?',
    component: 'Student'
  },

Student.js

  render() {
    // get the page number from react router's match params
    let currentPageNumber = 1;
    // Defensive checking, if the query param is missing, use default number.
    if (this.props.match.params.pageNumber) {
      // the match param will return the whole query string, 
      // so we can get the number from the string before using it.
      currentPageNumber = this.props.match.params.pageNumber.split('?page=').pop();
    }
    return <div> 
             student listing content ...
             <Pagination pageNumber = {currentPageNumber}> 
           </div>
  }

Pagination.js

render() {
    return <div> current page number is {this.props.pageNumber} </div>
  }

The 2nd solution is longer but more flexible. One of the use cases is server sider rendering:

Apart from the react components, the rest of the application (e.g. preloaded saga) need to know the url including query string to make API call.

Collectives™ on Stack Overflow

React Router: Query Param Match?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related