React Router in Depth #4 - Nested Routes & Layouts

In this React Router tutorial, you'll learn how to create nested routes and nested layouts.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 React Tutorial:

[markinman]

Dude you are the man my guy like bro. There is hardly any documentation out there for this rn and your tutorial is very informative and you articulate your ideas well. Look forward to more of your content.

[romanr]

Man, just wanna thank u for this tutorial on router, cuz I've tried to wrap my head around react router for quite a while, and finally with your help things start getting clear. Thanks!

[Randoman]

Thank you so much for explaining <Outlet/> in the beginning. My nested routes weren't displaying past the root route, and its because I didn't have an Outlet component within that root view

[matilha]

thanks a lot for the course. One question; what´s the advantage of declaring the pages components inside the App component just so you have to use <Outlet /> component iinside <RootLayout>?

[ImDoingItAll]

One of the best tutorial I've had... you're amazing man!

[thehistoryshow]

Thanks for tutorial, could you please tell which vscode extension your're using for boilerplates, I tried but not found what I was looking thanks in advance

[HuyLe-vvgo]

How could we make the parent route dynamic, for data such as accountID. Ex path: root/:accountId:/help

[PM-rste]

Can we show the content of faq by default when you go to the help page without clicking the view faq button?

[lhtujcv]

gotta be one of the best and most up to date react router tutorials. Thanks Net Ninja

[davidmaduabuchi]

Thanks fot this man, i was having seeious problems with nested routes. This saved me a whole lot of time.

[jhoncosmos]

Assuming I want to make a dashboard component that is made to have a layout different from the root layout, how do I go about fixing that?

[smylmrz]

How can we create different layouts and do we need a separate createBrowserRouter or RouterProvider for each layout? Could not find anything related to this :(

[benelansari]

hi
Can we learn just the new way of creating routes hence we dont focus on the old way? or we still need to use the old way too? thank you

[meitoli]

Dude even ChatGpt has no idea how to use the new react-router-dom version. Thanks a lot!

[zkhan]

thanks bro even gpt was not even to solve my nested route query but you helped me

[trumbaron]

How come the Lorem ipsum p-tag in help-layout appears below the h2-tag "Website help"? There is a display: flex on the help-layout class. Hmm

[abhinavchauhan]

Hey Net Ninja! Could you please upload the latest versions of django playlist video 14 and 15? Many people including me are stuck and constantly getting error: Reverse for 'detail' with keyword arguments '{'slug': ''}' not found. 1 pattern(s) tried:
Literary tried everything but still not resolved.

[johnnyholiday]

Hi, Just had a problem with the CSS with my own project, it seems that the <Outlet/> is givving me issues with the hieght of the page when adding a navbar and a footer components in the Layout component, all the Outlet components height are messed up :( I dont know how to fix it!

[raisama]

how do you use protected routes in this new version

[IsaacOlayinka-dhse]

The tutorial is awesome but I have a question. I've tried other deployment platform but none seems to be working, so I resorted to github pages. My question is how do you intend to deploy using github pages if Hashrouter isn't part of the route in the video