Query Strings with React Router

3 min read.
This post is part of our React Router v4 course. And this emoji 🕺 is my favorite.

In this post we’ll break down how to implement and parse query strings with React Router.

Video

Post

When you’re building for the web, if you want to pass information via the URL (and it doesn’t make sense to use a URL parameter), you’d use a query string.

You’ve probably seen this before IRL. Here’s an example from Twitter’s analytics page that we’ll use throughout this post.

Query string in React Router

This URL has three route parameters and two query strings. Twitter is using query strings to tell its route to filter the Tweets by top (most popular) and that the origin was im (which I’m not sure what that means TBH). With that said, odds are you’re not here to learn what query strings are but instead how to use them with React Router. The good news is that if you’re already comfortable with React Router, there’s just a few small details you need to know.

Let’s say we were Twitter and we were building the Route for the URL above. It may look something like this

<Route path={`match.path/tweets`} component={Tweets} />

Notice at this point there’s nothing new. We don’t have to account for the query string when we create the Route. All we need to do is parse them inside the component that is being rendered when that path matches - in this case, Tweets.

Again, we’re assuming the URL looks like this https://analytics.twitter.com/user/tylermcginnis/tweets?filter=top&origin=im

class Tweets extends Component {
  componentDidMount() {
    // How do we get the values for filter and origin?
  }
  render() {
    ...
  }
}

Now the question becomes, how do we get access to the query string values from the URL? If you poke around on the location object that is passed to all components rendered by React Router, you’ll notice that it has a search property on it.

componentDidMount() {
  console.log(this.props.location.search) // "?filter=top&origin=im"
}

Cool, but this is the literal query string. You’ll need to somehow parse it before you can get the actual values. You may be surprised to hear that React Router doesn’t come with built in with support for parsing query strings. The reason for this is because, over the years, there have been many requests to support different implementations. With that, the team decided it would be best for users to decide what the implementation looks like rather than baking in a “one size fits all” solution. Regardless, what that means is that you’ll need to use a browser API (that may not be supported by all the browsers you need) or use an external library for parsing the query string. The library I typically use is the query-string library on NPM.

With that library installed, all we need to do is call queryString.parse passing in our location.search. That will parse the query string into an object which we can then grab the values off of.

import queryString from 'query-string'

...

componentDidMount() {
  const values = queryString.parse(this.props.location.search)
  console.log(values.filter) // "top"
  console.log(values.origin) // "im"
}

That’s it. Go parse those query strings.

Liked this post? Share it 🕺

Newsletter

Listen, I get it, newsletters are the worst.

This one is different though.

Stay up to date with the latest and greatest in the JavaScript ecosystem.

Already a member? Enter your email to check your score.

The Socials

The Newsletter