All language subtitles for 012 Navigating To Dynamic Routes_Downloadly.ir_en

So to navigate to dynamic pages,

we can still use this link component,

which we import from next/link.

We use it just as before, so here,

again, we can add an unordered list,

and add the link component, and then say

our first client is Maximilian.

And here, the ID of that client could max.

So, therefore we can simply set this

to /clients/max, for example.

And then, this simply is taken as a concrete value

for this ID here in the square brackets.

And, of course, we can have a second client here,

let's say Manuel, where the ID then could be manu.

And if we save that and have a look at our clients page,

now we can click on Maximilian to be taken

to the overview page with all the projects

for this client, for max as you can see here on the right.

Or if I click on Manuel, I go to the same page,

but with a value of manu for that ID.

So, that's how this works and how we can,

of course, also navigate to pages with dynamic parameters.

Now, in reality, you often need to generate

a list like this dynamically.

So, you might have some piece of data,

let's say, a clients array here.

And every client is an object here

with an ID of max and a name of Maximilian.

And then, we have another client here

with a name of Manuel and an ID of manu.

So, what I already have down there.

But, in reality, you would, of course,

often get such data from a database, for example,

and you want to generate that dynamically.

You can do this as well just as you know it

from standard React because this is standard React.

Inside of this component, it is a standard React component,

nothing special about that.

So, therefore, we can map our clients

to list items just as we know it.

Set a key, as we should to ensure that React

is able to fully understand this list

and update this list efficiently.

And set this to client.id, for example,

since that is a unique identifier.

And then, in the list item, we can use our link

and between the link tags, output client.name

and for the link set a ref, which we also set

to a dynamic value where we, for example,

use back ticks to create a template literal

to set this POV to /clients/

and then inject a dynamic value here, which is client ID.

So, with that, we render a bunch of list items

with a bunch of links where, inside of the link,

is a text, which is visible to the user

we output the client name and as a value

for the target for the destination of that link

we create a string with a template literal

by having the hard coded /clients part.

And then, the dynamically injected client ID,

which is different for every client we're looping through.

Hence, with that, if we save this

and we go back to our clients page

it looks like before, and it works like before.

But now that list is generated dynamically.

And that works just as you know it from standard React.