URL Parameters with React Router


In this video, we are going to recreate this
URL Parameters example and talk more in depth about how to use URL parameters, or route
parameters with React Router. So what we’ll do is, first, let’s go ahead
and import a few different things from React Router. We’ll need the BrowserRouter, and we’ll go
ahead and import that as Router. We’ll also grab the Routes, and then we will
grab Link, and all of those are going to come from ‘react-router-dom’ because we’re dealing
with the web. And now, first thing we’re going to do is,
we’re going to wrap everything in our Router component, and then we will have this

. And inside of this

, first thing, let’s
go ahead and create an

element for Accounts. And then, underneath this, what we’re going
to have is kind of our nav, or our unordered list. So all of these are going to have a Link component. All of them are also going to have a ‘to’
property. So this first one, what it will do is, we
will go to /netflix, and then the second one, we will go to /zillow-group, this third one
will be /yahoo, and this last one /modus-create. All right, so we have all of our links set
up. Now, we need to go ahead and render a Route
component, which is going to render some UI when any of these components match. So what we can do is, we can come in here
and render a Route, and there’s a few different options. There’s a few different things that we can
do. Because all of these are going to render the
exact same component, what we’ll do is, we will go ahead and use URL parameters to say
when the path is /:id, and what we’ll do is, we’ll go ahead and render some component. So whenever we are at ‘/’ anything inside
a wrap, whether it’s ‘netflix’, ‘yahoo’, etc, we’re gonna go ahead and render this component,
which we will call Children. So now, let’s go ahead and create our Child
component, not Children, and then what this component is going to do is, all it’s going
to do is, it’s going to show the specific Route param. So for example, if we’re on ‘netflix’, then
it’s going to just show Netflix. So what we can do here is, we can have a

which has an

element, then we will say ‘ID’, and whenever React Router renders a
component, what it’s going to do is, it’s going to pass it three things. One of those is this ‘match’ property. So let’s go ahead and take a look at what
this looks like. So when we go to any of these routes, you’ll
notice that this ‘match’ property has a few different properties on it. What we are interested in is the specific
ID of the Route param. So again, what’s happening is, we have this
Route right here, and when we do ‘:’, what’s going to happen is, we’re saying this is a
placeholder. It’s a Route parameter, a URL parameter for
the specific Route. So this is going to be dynamic. It’s going to be changing based on the Route
that we’re in. So if we wanted to go ahead and log this specific
URL parameter, what we would do is, we would say ‘match.params.’ whatever this is right here. If we change that, then you’ll notice what
we’ve done is, we’ve changed this property right here. So let’s go ahead and change this back to
‘ID’, and then inside of our Child component, we can get rid of this ‘console.log’, and
then we can go ahead and render ‘match.params.id’. And then, now, in our application, whatever
link we click on, what we’re going to get right here is the specific URL parameter for
the ID. Now, I know this example is a little bit contrived. A good use case for when you would use URL
parameters like this is, say that you were doing something like ‘users/:uid’. Then, what you can do is, when this components
mounts, you can go ahead and grab the ‘uid’ from ‘match.params’, and then you can go ahead
and fetch that user’s, say, their profile or whatever information you need specific
to this user, and then you would show that information to the view. But, a very basic example of that is, what
we have here and what is in the React Router documentation, where we just have this ‘id’
URL parameter, and then we go ahead and grab that for ‘match’, and then we show it to the
view.

7 comments on “URL Parameters with React Router”

  1. xinyu Liu says:

    Great tutorial!

  2. SRTLarx says:

    Thanks for this Tyler!

  3. 4 The Man says:

    Really nice mate, thanks you!

  4. by lee says:

    What is your sublime theme?

  5. NyvekBr says:

    1:06 how he does that?

  6. Ivan Herve says:

    What if the Child component was declared as a class ? How would you use the parameter "match" ?
    Thank you 🙂

  7. Tyler McGinnis says:

    🚀 Try our new 2019 React Course – https://tylermcginnis.com/courses/react/

Leave a Reply

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