Original subtitles

Dynamic routes and route parameters,

are another crucial feature of React router,

which you will use in almost any application,

you are building.

But there is another problem which you could face,

with this current routes set up.

At least if you may be already played around

with those props a little bit.

At the moment everything works

and we load totally different pages

and therefore show totally different contents here

based on the different URLs.

But of course one problem we have,

is that we're not linking to the product detail page.

We have to enter that manually.

But another problem is maybe in general,

how we structured our URLs.

It is quite common on websites stat,

if you have a list like page,

you have something like slash tutorials as a path,

but that if you then click on a list item,

like a specific article here,

you simply have slash tutorials.

So the path I had before,

and then another path added thereafter.

This is not a must do but it's a common pattern,

which is intuitive for users

and which is hopefully also intuitive for you,

as a developer.

So here instead of slash product,

dash detailed slash some ID,

we might want to use slash products, slash some ID.

So that for just slash products,

we load the list of products.

And for slash products, slash some ID,

we load the details for that product.

Now on the products component,

I also want to turn my products into links

with help of the link component.

Link instead of nav link,

because here I don't want some active link styling.

I just want standard links.

And then we can wrap this text here

with that link component and add the two prop.

And now for example navigate to slash products slash P one,

for the first item.

And then replicate that for the other items,

wrap all that text inside of links

and just change the IDs here.

And of course, we could also loop for some data here

and generate this list

and the prop values for the two prop dynamically.

That's also something we're going to do a little bit later.

For the moment I have these hard coded links.

And with that, if I'm now on slash products

I got these clickable items.

But watch what happens if I click on a book.

We load to product detailed data

but we loaded below this list.

And why is that happening?

I mean, it is working

but we're not leaving the products page.

That's happening because this is how React router works.

We define our routes here,

but by default these routes are not parsed,

such that only one of them is loaded at the same time.

But instead all routes that match the current path

will be loaded.

Now you might say, okay, but still only this route

the last route should be matching the current path.

Because the current path is slash products slash some ID.

And that's clearly not this path of the second route.

And that is correct.

But matching in React routers world,

means your path starts with the path defined here.

And indeed, if we are on slash products slash p3,

as I am here,

then this path starts with slash products.

It also starts with slash products slash some ID.

That's that actually the entire path

but it also starts with just slash products.

And that's why both routes are active now.

This is simply how React router works.

Now, sometimes that is what you want.

You might want to show more details below that list here

and then this is how you could make it work.

But sometimes,

you only want to have one active route at the same time.

And to make this work,

you can utilize another component offered by React router,

DOM, the switch component.

The switch component,

can be wrapped around your route components.

So you add the opening and closing tags

around all these routes.

And then only one of these routes,

will be active at the same time.

And it will be the route which is matched first.

So if I now save this, if I click these links

we don't see the detail page anymore.

That's not the desired result,

but at least we don't have multiple pages on the screen,

simultaneously.

But why do we see the list here,

instead of the detail page?

After all the detailed pages is the more specific one.

Well, as of React router version five,

it doesn't matter if a certain route is more specific.

React router simply goes through your routes top to bottom.

And when it finds a match, and keep in mind,

that it matches the start of a path, not the entire path.

If it finds a match, it will then stop because of switch,

not look at the other routes,

and rendered that one route for which it did find a match.

Now that is how it behaves.

But of course here, it's not giving us the result we want.

One solution is to change the order.

We can move the products route

after the product detail route

and therefore this will be the first match.

And this route will be ignored.

If I do that, we would see the route detail page.

Now this would be working.

And alternative would be,

that we leave the original order

but we add another prop here on this route.

The exact prop.

This tells React router,

that this should only lead to a match

if we have an exact match.

So then it switches from matching the beginning of the path,

with this path to matching the full path.

And therefore now again, if we saved this,

the product detail page would not match slash products,

because it's not a full match,

slash products on the other end would.

And that would then be ways of making it work

in the way we want.

Again, I'm showing this in great detail,

because these other behaviors are not wrong

or a problem.

Sometimes you want to build applications,

where multiple routes can be active at the same time.

But sometimes you don't want to do that.

And then this here is a solution you can use.