Ambiguous Matches with React Router - Lake Harding Association

Ambiguous Matches with React Router

Ambiguous Matches with React Router

By Micah Moen 2 Comments August 25, 2019


In this video, we are going to go over React
Router’s ambiguous matches. An example here on the React docs. So, first of all, what
we’ll need to do as always is import a few different things. I’m going to go ahead and
grab browser router. We’ll import it as router. We’ll also grab route, link, and then another
component called switch, and all of these are going to be coming from react-router-dom.
All right, so now that we have all the components we need, let’s go ahead and build the components
that we’re going to be rendering. So we’re going to have a few different static pages
here. We will have an About page so that all it’s going to do is render abouts. And then
we will also have a Company page, and then we’re going to have another component called
the User. And what this component is going to do is it’s going to use URL parameters
to match on a specific user, and then it will just return a div, and inside of this we
have h2. And we will just say user is going to be whatever match.params.user is. All right. So now that we have our components
we’re going to render, we actually need to go ahead and set up our routes so that we
can render those. So, as always, we’re going to wrap our whole app inside of this router
component. Inside of that we’ll have a div. Now, let’s go ahead and start with the routes
that we’re going to be building. So this first one is going to be at/about, and the component
it’s going to render is going to be the about component that we built earlier. And then
we’re also going to do this exact same thing, but instead of about, we’re going to do it
for /company, and we will render the company component. And now, last, what we want to
do is we want to be able to render our user component. And, as I mentioned earlier, this
one’s going to use URL parameters. So what we will say is whatever the path, looks something
like this, then the component we want to render is going to be our user component. So the
idea here is that this is going to be a dynamic route, meaning we can swap out the different
user, and each time the user changes we’ll still just render the user component, and
match.params.user will be whatever that user’s ID is. Now, as you may have seen, the problem with
this and really the whole point of this example is to show you that, with routes, routes can
match in more than one place. So, if we come to /company, not only is this route going
to render the About page, but also our route right here is going to match, because React
Router assumes that about is just a user, because this pattern is really the same as
this pattern right here. So let’s go ahead and build out our nav, and I’ll show you what
I mean by that. So we’re going to have four different links
here. The first one will take us to /about. The second one is going to take us to our
company route, and then let’s assume that these are chronic dynamic routes. So we’re
going to, let’s say, go to /Kim, and then we will go to /Chris. Typically, these won’t
be hard-coded, because they’re going to be dynamic, but just to show this example, we’ll
go ahead and hard-code so we can go to the specific routes. So now if we render our app,
if we go to /about, you’ll notice that the about route or the about component is being
rendered, but also our user component, and the reason for that is the issue I mentioned
earlier. When we go to /about, this path right here is also going to match, which then gives
us the user component. So, in order to fix this, what we can do is
we can use React Router’s Switch component, and what Switch does is it will render the
first route or the first path that matches and nothing after that. So what we can do
is, if we wrap everything in a Switch component, invest all of these, and then close it, now what’s
going to happen, because we have our dynamic route or our route that’s using the URL parameter
last when /about matches, because we’re in a switch, it’s not going to route or it’s
not going to match anything below that. So, for example, if we go to /about, this component
will match right here, we’ll get the about components, and then nothing else will happen,
because we are inside of a Switch. But if we go to /Kim, about’s not going to match,
company’s not going to match, but then our user URL parameter will match. So what that
looks like now is we can go to about and company, and the user is not matching, but when we
go to Kim or Chris, you’ll notice that everything is working fine, because we’ve added Switch,
which, again, just says, “Hey we only want to match the very first path that matches,
nothing else after that.”

2 Comments found

User

Joseph Peterson

What is that destructured "match" word? Can you explain that to me?

Reply
User

Tyler McGinnis

🚀 Try our new React Hooks Course – https://tylermcginnis.com/courses/react-hooks/?utm_source=youtube&utm_medium=video&utm_campaign=why-react-hooks

Reply

Add Comment

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