All language subtitles for 008 Extracting Dynamic Path Segment Data (Dynamic Routes)_Downloadly.ir_en

So how do we then get access

to the concrete value that was entered by the user

in the URL?

For this, Next.js gives us a special hook we can use.

For this, we need to import something from

Next slash router.

So from the Next library

and there from the router sub package.

And we need to import the use router hook.

So that's a React hook defined by the Next.js team

which we can use an any functional component.

Alternatively, if you're working with class-based components

there also is a width router, higher order component

which you can wrap around your class based component

to get a special router prop injected into your component.

But we're using the more modern

functional component only approach here

and therefore, we will use this use router hook.

Now inside of the functional component

we can then call use router like this

and this will return a router object to us.

Again, if you would be using width router

you would be getting that router key here

on your props object.

Now, what does this router

object give us which we're getting here?

This router object exposes various pieces of data

and various methods we can use.

Now we'll have a look at the methods later when we dive into

navigating between pages, but when it comes

to the data properties, we, for example, get the path name

and let's see what's inside of that

by simply console logging it here.

So that we can see what we get there as a value.

And that's also console log something else.

Let's console log, router dot query.

That's another interesting property we can access

on that router object.

With that, if we saved as updated project ID page here.

If we go to slash portfolio slash something

or anything like that,

and we then open up the developer tools,

we see the path here.

And the interesting thing here is that we don't

see the path we entered into URL slash portfolio

slash something, but the path inferred by Next.js.

So the path to component file,

that had to be loaded to bring this to the screen,

the portfolio folder and then to square bracket

project ID JS file if you want to read it like this.

And that of course is the path Next.js had to take

to reach this component,

which is responsible for what we see here.

So that is the encoded, the inferred path Next.js took.

Then here, we have an empty object

but we can ignore this double output we're getting here

for the moment.

Instead, if we have a look at the last log here,

we see that it's actually not an empty object

but it is an object with a project ID property

and then a value of something.

And that's the interesting part now.

This query property on the router

gives us access to the concrete data

that is encoded in the URL.

So it gives us access to the concrete value

we get for this dynamic path segment.

So we entered portfolio slash something

and therefore something is the concrete value

for this project ID placeholder.

And that's why on this query object,

we get project ideas a key name

because I picked project ID here

as a value between the square brackets

and then something so what we entered into URL as a value.

And that means that we can use this router query property

to get access to the concrete value encoded in the URL.

And if this would be the ID of some database object,

we could then send a request to some backend server

to fetch the

piece of data with an ID of

router dot query dot project ID in this case.

That's how we could use this encoded value.

And that of course, is how we will use it later

once we also dive into data fetching.

Here I just want you to understand

how that routing works and how we can get access

to the different pieces of data we might need.

And that is how we can get access

to this dynamic segment value.