All language subtitles for 006 Working with Nested Paths & Routes_Downloadly.ir_en

Now we can add more and more pages

by adding more and more files here.

But at some point you might want to structure your pages

in a different way, or you need some deeply

nested path consisting of multiple segments.

In such cases, you can add folders to the pages folder.

For example, here, we could add the word

folio folder

and in that folder inside of the portfolio folder,

add an index JS file.

So again, this special name

but now nested in the portfolio.

Now in there, we can again create a function

the portfolio of page function.

And of course that's just another react component

which we're adding.

And here we could add

the word folio page as the content

and then export this default portfolio page like this.

If we do that and save everything,

we can also visit slash portfolio here,

and we see The Portfolio Page.

Therefore, this is an equivalent

to creating a file named portfolio JS

one level above that folder.

So instead of about JS,

we could have created an about folder,

and in that about folder

we could have added an index.js file,

and then we could also have our About Page component

in this index.js file in the about folder

instead of having the about JS file here.

So now I deleted this about JS file

and if we save everything we can still visit slash about.

So that is a perfect replacement.

That is an alternative.

And it's up to you what you prefer.

If you want to have sub folders to structure that

or if you want to have files with that name.

Now Sub folders don't just exist

so that we have an alternative to a file named about though.

Instead we need them if we want to create POS

that consists of multiple segments,

of for example, in portfolio

if we want to have let's say a list JS file

so that we can have a URL off slash portfolio slash list,

then there is no way around having a sub folder

because in there we can now create our List Page,

and return our JSX code here, The List Page.

And of course, just as before then export this List Page.

But now with that,

we can visit slash port folios slash list.

And we see that, but there wouldn't have been another way

of getting this to work without that portfolio folder,

we could not create this nest the path.

So that is a use case

where we then definitely need nested folders.

And of course in general,

having some kind of structure in the pages folder

and working with sub folders

for grouping files together isn't a bad idea in general,

because of course that allows you

to keep your files more organized,

especially if you're working on websites

with dozens or hundreds of pages.