Importance of Natural Resources

Query Strings with React Router


In this video what we are going to do is we
will look at query strings, and more specifically, how to use query strings with react router. Now, if you’re building for the web, and you
want to pass information via the URL, one way you might want to do that is via query
strings. So here what I have is coinranking.com, it’s
just a list, or a dashboard, of the top 50 cryptocurrencies ranked by their market cap
by default. Now, what if I want to come in here and I
want to rank by price? You’ll notice when I click on price, if you
look at the URL, we have this ?sorton=price. So what this is, is it’s a query parameter. We’re not necessarily rendering anything new
based on that information, but what we are doing is we want the data in this dashboard
to now be sorted by price. We can come in here and we can do the exact
same thing for a 24-hour change. So over the last 24 hours, F16 Coin, whatever
that is, went up a lot. But you’ll notice each time the sorton query
string is going to change based on whatever we clicked on. So now the question is, how do we go about
utilizing query strings in a react router app? Well, what we can do is, let’s go ahead and
pretend like we are building this dashboard right here. So if we had our main app component, we’ll
say, and inside of that, we wanted to render the route for this specific view. What that might look like is something like
this, where we have a route, the path is just going to be our main index path, and then
the component that’s going to be rendered when we go to that path, we’ll just say is
the dashboard component. So you’ll notice here that we’re not doing
anything different. When you use the route component, you don’t
have to account for any query strings. Instead what you’ll do is you’ll just grab
the query strings inside of the dashboard component. So our route will look like this, but inside
of our dashboard component, let’s go ahead and look at how we would go ahead and grab
the query string from the URL, so that we can then know which data we should show, or
specifically in our use case, how we should sort this specific grid. So what we would have is a component as we’re
normally used to. So we`ll just say, dashboard is going to extend
component and then a render method, which we’re not going to worry about. But what we want to do, is when our component
mounts, we want to go ahead and grab the value located in the query string, so that when
we fetch our data, we know which data to fetch, because the data we fetch for this view, when
we are sorting by the price is going to be very different than this view, when we are
sorting by the market cap. So we come in here and we will say, when the
componentDidMount, and now the question is, how do we get access to the values in the
query strings, specifically this sorton value. Well if you look at the props that are passed
to a component by a react router, one of them is the location prop, and on that there is
a search property. So if we were to just log (this.props.location.search),
what we would get, in this case, is this right here. Well, that’s great, but notice that it’s literally
a query string. So what we need to do in order for us to grab
the value of sorton, we need a way to figure out how to parse this query string. And you might be surprised, react router doesn’t
come with this functionality built into it. So you have a few different options here,
one of them is to use a browser API, which is called URLSearchParams, and the way that
you would do that is you can come in here and say, params is going to equal, create
a new instance of, URLSearchParams passing in the query strings. So the this.props.location.search. And then you could do something like params.get,
and whatever the specific value is, in this case, it’s sorton, and that would go ahead
and give you the value for whatever sorton is. The problem with this is it’s not completely
supported in older browsers, so if you look and you don’t need something like ie11 or
older browsers, you can go ahead and use this, but if you do need to support older browsers,
you’re kind of out of luck as far as this built-in browser API goes, but there is an
MPM package that I like to use, and it is called, query-string. So what you would do is you install it, and
then you would import it, and it’s just query-string again, and then how it works is we could do
something like this, where we call query-string.parse, pass in the search string, or the query string. That’s going to return you an object with
each key in that object being the specific queries. So, in this case, our object will have one,
which is sorton, and the value is going to be market cap. So what we can do is come in here and say
(values.sorton), and this is going to give you market cap. And so now what we can do is, let’s say that
we had a function that was called fetchDashboardData, and it took in the specific query string,
what we would do is we would just come in here and pass in values.sorton, because we
used the query string package on MPM to go ahead and parse our query string, that gave
us back an object, and then that object that we got back from parse had a property on it
of sorton, because that’s what we had right here.


Reader Comments

  1. This is nice, but what might not be clear to beginners is what is going on when you are actually clicking the sorting options? You would probably need to have a state inside Dashboard component, and then on click of the sorting option you would set state based the option clicked and after that probably do history.push(url + queryString.stringify(state.sorton)) so you get your component mounted again, as you are calling your API in componentDidMount.

  2. In your website plz accept payment through debit card I want to take your course but not have credit card

  3. That's great! I found useful the difference between using URLSearchParams and query-string. Maybe next time we can also touch on what do we do if we pass a dodgy string? I.e. if the user went and typed `sorton="findingNemo"`. How would the fetchDashboardData behave in that situation etc.
    Thank you for your time and for sharing this!

  4. componentWillReceiveProps is needed when clicking on the sort option? Because it seems component will not be mounted again when we change query param.

  5. 🚀 Try our new 2019 React Course – https://tylermcginnis.com/courses/react/?s=youtube-query-strings-with-react-router

Leave a Reply

Your email address will not be published. Required fields are marked *