Original subtitles

Now that we know how we can navigate,

let's come back to the actual main pages which we have.

I wanna come back to The Products Page, specifically.

It would be pretty realistic

that on this Products Page component,

we don't just have some title,

but maybe also a list of Products.

A list of Product items.

So here we could wrap this into a section,

or a div, or a fragment.

And then, besides this header,

we might also have an unordered list,

with a couple of Products.

Product 1, Product 2, Product 3.

Now, at the moment, this is totally unstyled,

as you can tell, but we do see this list here.

Now, typically, those list items

should probably be clickable,

so that when we do click on Product 1,

we're taken to the detail page, for that Product.

And for this, we now need to define a new page.

We need to define such a detail page.

So in the pages folder, I'll add a new component,

and I'll name it ProductDetail,

because this is the component that should be loaded,

to display more details about the selected product.

And in here,

I'll therefore create the ProductDetail component,

and export this component function like this,

and then here, return let's say a section with a h1 tag

where I say "Product Detail."

Something like this.

This component should now be loaded,

if we click on one of these Product Items.

Now, of course, therefore,

we'll have to turn these Items into links,

but we'll also have to register this component

as a new route.

So, in App.js, we wanna add a third Route.

So, add another Route here.

And now the path will be the tricky thing.

We could, of course, use product-detail

or something like this, as a path.

And then, import this ProductDetail component

from pages ProductDetail

and then simply output ProductDetail here.

We could do that.

Now, if we enter product-detail in the URL,

we load this product detail page.

So that's working.

But this approach has a flaw.

Of course, we have different Products in our application.

Product 1, Product 2, and Product 3,

and depending on which Product we clicked on,

we always wanna load the Product Detail page,

but with different data.

Let's make this less abstract.

Let's say our first Product is a book.

The second Product is a carpet, because, why not?

And the third Product is an online course.

Now, when I click on the first Product,

I wanna load this Product Detail item,

and then, maybe instead of Product Detail,

I wanna say a book, and below that,

show a paragraph with more information about books.

Something like this.

If I click on the second item,

I wanna show a Carpet here,

and show more information about a carpet.

And that extra information

could be fetched from a backend API, from a database,

or maybe from some application-wide state,

which we manage with React context or Redux.

We're not doing anything of that here,

but that is how we could manage this global data.

But because we need different pieces of information,

based on the product we clicked on,

we definitely wanna use one and the same component,

but we need a way of telling React Router

for which specific product

this component should be loaded,

so that inside of this component,

we can then kind of retrieve that extra data.

That extra product data, in this case.

And for this, we can define dynamic routes.

Instead of just defining /product-detail like this,

we could define the path as /product-detail/,

and then, we use a special syntax:

colon, and then any identifier of your choice.

For example, productId, but that's up to you.

The colon is not.

This is a dynamic path segments.

It tell React Router that the overall path

for which this page should be loaded,

will be something like this:

our-domain.com/product-detail,

because that's hard-coded here,

/anything.

so this can be any value.

It's a placeholder.

This could be p1 for the productId or p2, or a-book,

whatever your productId might be.

This is a dynamic segment, and it takes any value.

So this component, the productDetail component,

will be loaded for /product-detail/anything

and then inside of this component, will get

access to the concrete value, for this dynamic segment.

But first of all, let me show you how this works.

If I save this, I can now visit /product-detail/p1

and I see Product Detail.

The same if I enter p2,

or anything-else, as long as it's a

valid URL, it works, and we can

now visit this Product Detail page.

And that's how we can register dynamic routes

and dynamic paths.

But of course, we now also need a way of

getting access to the concrete values stored

in this dynamic segment, so that we can use it

inside of this loaded component, to then fetch

the full data for this product,

or for whatever values you are working with.

And that's what we're going to do next.