How to handle query params in React Router

#react #showdev #webdev #javascript

Follow me on Twitter, happy to take your suggestions on topics or improvements

In part 3, we learned how to create dynamic URLs in react router. In this part, we will learn how to handle query params in the URL.

Lets create a new route for search page with query params,

// App.js
...
const SearchPage = () => {
  return (
    <h3>Search Page</h3>
  );
}

const App = () => {
  return (
    <section className="App">
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
        <Link to="/search?q=react">Search</Link>
        <Route exact path="/" component={IndexPage} />
        <Route exact path="/users" component={UsersPage} />
        <Route exact path="/user/:userId" component={UserPage} />
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/search" component={SearchPage} />
      </Router>
      <a href="/about">about with browser reload</a>
    </section>
  );
};

...

Its our usual way of creating a link, route definition and a component. If you closely look at it, there is no difference between static route and route with query params.

We don't need to define query params in the route definition because by default it will be handled by the react router and send the query params into a props to the component.

It won't match the path if we define the path like this /search/?q=:searchValue. You can try it in the codesandbox.

Now, we need to access all the query params we pass to the URL in the component. In our previous part, we talked about how react router pass two params match and location.

For dynamic routes, react router pass the route params to match props
For routes with query param, the info about query params will be send through location props

Lets see, what information it sends in the location props

...

const SearchPage = ({ match, location }) => {
  return (
    <p>
      <strong>Location Props: </strong>
      {JSON.stringify(location, null, 2)}
    </p>
  );
}

...

You can see on the search page,

Location Props: { "pathname": "/search", "search": "?q=react", "hash": "", "key": "allc40" }

You can clearly see, react router pass the query params info in location.search. If you add more query params, you with get everything in the same string value. eg., ?q=react&limit=3

In order to get each value, you can use your own helper library or query params npm package so that you can get the values as nice key value pair objects.

One such package is yarn add qs. But there are many, you can choose which one suits your URL

Lets show the location.search value in the component.

const SearchPage = ({ match, location }) => {
  return (
    <p>
      <strong>Query Params: </strong>
      {
        location.search
      }
    </p>
  );
}

Thats it folks, see you in next blog posts soon. Keep supporting and help me teach more and learn more 🤗

You can checkout the codebase for this series here and the code for this section here

Top comments (3)

José Muñoz • Apr 23 '19

I would like to add that there is no need for a custom or 3rd party lib to handle query param parsing, use the URLSearchParams API instead, it's native