Тёмный

React Router in Depth #4 - Nested Routes & Layouts 

Net Ninja
Подписаться 1,6 млн
Просмотров 74 тыс.
50% 1

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:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
github.com/iam...
🐱‍💻 React Tutorial:
On Net Ninja Pro - netninja.dev/p...
On RU-vid - • Full React Tutorial #1...
🐱‍💻 React Router Docs - reactrouter.co...
🐱‍💻 VS Code - code.visualstu...

Опубликовано:

 

11 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 73   
@markinman6899
@markinman6899 Год назад
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.
@romanr5962
@romanr5962 Год назад
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!
@NetNinja
@NetNinja Год назад
Great to hear! :)
@mohammadumar443
@mohammadumar443 8 месяцев назад
@@NetNinja There is a scenario in which I want to show a separated component for only index (help) route with component RootHelp. Problem I am facing, RootHelp component shows within HelpLayout. I do not want to show contents of HelpLayout, just RootHelp contents should appar when I move to route "/help". How can I achieve this with react router v6 ?
@meitoli
@meitoli Год назад
Dude even ChatGpt has no idea how to use the new react-router-dom version. Thanks a lot!
@NetNinja
@NetNinja Год назад
Aha, happy to help Galo!
@ImDoingItAll
@ImDoingItAll Год назад
One of the best tutorial I've had... you're amazing man!
@NetNinja
@NetNinja Год назад
Wow, thanks Oumar! :)
@user-lh4tu1jc1v
@user-lh4tu1jc1v 6 месяцев назад
gotta be one of the best and most up to date react router tutorials. Thanks Net Ninja
@NetNinja
@NetNinja 6 месяцев назад
You're very welcome! :) thanks for watching
@techinfo4623
@techinfo4623 5 месяцев назад
@@NetNinja please tell me if person wants to make two layout one for authentication and one for main layout please explain
@1Randoman
@1Randoman 5 месяцев назад
Thank you so much for explaining 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
@davidmaduabuchi1832
@davidmaduabuchi1832 4 месяца назад
Thanks fot this man, i was having seeious problems with nested routes. This saved me a whole lot of time.
@NetNinja
@NetNinja 4 месяца назад
Glad it helped! :)
@stefanmasic1287
@stefanmasic1287 Год назад
1.000.000 thanks. You are incredible teacher!!!!!!!!
@NetNinja
@NetNinja Год назад
Thanks for watching Stefan! :)
@zkhan3863
@zkhan3863 2 месяца назад
thanks bro even gpt was not even to solve my nested route query but you helped me
@NetNinja
@NetNinja 2 месяца назад
happy to help! 😊
@charlodev482
@charlodev482 7 месяцев назад
Thank you so much, you are a G!
@PM-rs4te
@PM-rs4te Год назад
Can we show the content of faq by default when you go to the help page without clicking the view faq button?
@rishibakshi2004
@rishibakshi2004 4 месяца назад
Thankyou so much brother❤
@NetNinja
@NetNinja 4 месяца назад
No problem 😊 thanks for watching!
@taherr1341
@taherr1341 9 месяцев назад
You are the best. Thank you.
@floramerano6293
@floramerano6293 4 месяца назад
Haha!! It's getting deep now. 😆
@IsaacOlayinka-dh6se
@IsaacOlayinka-dh6se 7 месяцев назад
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
@ammarbashirharuna5649
@ammarbashirharuna5649 4 месяца назад
thank your so much my hero
@ana-mariaolujic6570
@ana-mariaolujic6570 Год назад
Thank You Shaun :D
@shineLouisShine
@shineLouisShine 11 месяцев назад
HELPful stuff indeed! Thanks a lot :)
@NetNinja
@NetNinja 11 месяцев назад
Glad it was helpful! :)
@ishanatapattu3278
@ishanatapattu3278 Год назад
Awesome Content!
@CAIOVICTORARAGAOPEREIRA
@CAIOVICTORARAGAOPEREIRA Год назад
amazing class! thank you so much
@tutopoints1920
@tutopoints1920 4 месяца назад
1:36 . Yes It Does Sir
@matilha2020
@matilha2020 Год назад
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 component iinside ?
@johnnyholiday1150
@johnnyholiday1150 9 месяцев назад
Hi, Just had a problem with the CSS with my own project, it seems that the 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!
@catreunion
@catreunion Год назад
Thank you teacher 🙏🏻
@NetNinja
@NetNinja Год назад
You're very welcome Isaac! :)
@benelansari7228
@benelansari7228 10 месяцев назад
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
@coderizer
@coderizer Год назад
great tutorial
@smylmrz
@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 :(
@maskman4821
@maskman4821 Год назад
Hello, Shaun, can yoy release tutorials on Astro and Qwik, they are the two frontend frameworks claimed rendering page the fastest because no javacsript loaded initialy which is impressive, I think your audiences want to know and learn about these two rising stars, hopefully you take it into consideration 🙏
@trumbaron
@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
@thehistoryshow111
@thehistoryshow111 Год назад
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
@coffeeandtalk
@coffeeandtalk 9 месяцев назад
route path:help, the man is indirectly asking for help
@jhoncosmos937
@jhoncosmos937 Год назад
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?
@GethushanRavichandran
@GethushanRavichandran Год назад
Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"
@agamurat3019
@agamurat3019 11 месяцев назад
how do we create different layouts?
@johnelbasha8967
@johnelbasha8967 Год назад
Great tutorial! Thank you. I'm guessing that your accent is from Manchester. Perhaps Bury?
@NetNinja
@NetNinja Год назад
Thanks John :) and very close! ..Salford.
@johnelbasha8967
@johnelbasha8967 Год назад
@@NetNinja I was born there. Hope Hospital, which is now Salford Royal. Small world! I am now favouring your tutorials over ones I have on Udemy because you get straight to the point. You have saved me a lot of time. Thank you for your contribution.
@norvusordoseclorum
@norvusordoseclorum Год назад
You can't actually access anything on GitHub can you include the files?
@raisama4314
@raisama4314 Год назад
how do you use protected routes in this new version
@vmooscode9959
@vmooscode9959 Год назад
amazing bro, but what if i want to use same layout across all routes and nested routes :|
@mohamedyoussef8835
@mohamedyoussef8835 Год назад
Awesome video +++++++++++ 😀
@HuyLe-vv7go
@HuyLe-vv7go Год назад
How could we make the parent route dynamic, for data such as accountID. Ex path: root/:accountId:/help
@amershboul9107
@amershboul9107 Год назад
Great!
@NetNinja
@NetNinja Год назад
Thanks Amer!
@abhinavchauhan8055
@abhinavchauhan8055 Год назад
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: ['articles/articles/(?P[^/]+)\\Z'] Literary tried everything but still not resolved.
@michalnowak2181
@michalnowak2181 Год назад
thx
@radosawweidemann4944
@radosawweidemann4944 Год назад
hi. when i type lorem10 and press tab nothing hapens also when type div.help-layout. Can I install some package for that ?
@jameelahmed7048
@jameelahmed7048 Год назад
dont press tab just hit enter after lorem10
@keldrogo175
@keldrogo175 Год назад
How would you insert the footer route on all the pages ?
@keldrogo175
@keldrogo175 Год назад
@@internet4543 true i expressed it wrong, i meant as a layout like he did the header. Im learning..
@keldrogo175
@keldrogo175 Год назад
@@internet4543 i see, thank you !
@pRiNCeSsMQD
@pRiNCeSsMQD Год назад
After that, the last prophet Muhammad ﷺ starts praying to Allah ﷻ for my success and help. Then I say in my heart that "I have promised to the last prophet Muhammad ﷺ to do this job but may Allah help me! How can I do this without the help of Allah?" - Muhammad Qasim Dreams
@salahaldinedouard5299
@salahaldinedouard5299 Год назад
Please Do remix.js next no pun
@user-tz9ov9lh8z
@user-tz9ov9lh8z Год назад
5:42
@newgem278
@newgem278 Год назад
Can I be your person assistant netninja, please am learning from you
@ratanlambha2602
@ratanlambha2602 Год назад
Sure why not
@ajaykmr8684
@ajaykmr8684 Год назад
Sure why not
@newgem278
@newgem278 Год назад
@netninja am damn serious i could send you my resume
@KastilIslam
@KastilIslam Год назад
The beginning of World War 3 signifies that Qiyamat (The Day of Judgement) is very near. And there isn’t much time left at all, as some people have claimed that these events are very far away.” Someone asks me, how many people will die in these wars? Then I respond back; "from the perspective of Ghazwa E Hind and ww3 that almost 1 billion people will die in this war. In the war against Dajjal, many more people will perish. About 2 or 2.5 billion people will die and most of them will be Muslims.” 🌟Please find more about these important dreams of Muhammad Qasim. We are the last generation of this world.
@JohnDoe-ty6sv
@JohnDoe-ty6sv Год назад
When is the php course coming?
Далее
React Router in Depth #5 - Custom 404 Page
3:43
Просмотров 37 тыс.
Learn React Router v6 In 45 Minutes
46:20
Просмотров 555 тыс.
React Router in Depth #6 - Loaders
12:07
Просмотров 57 тыс.
React JS | Class 7 | React Router
1:28:01
Просмотров 145
Nested Routes Tutorial - React Router Dom V6
8:38
Просмотров 105 тыс.
React Router in Depth #7 - Route Parameters
10:01
Просмотров 38 тыс.
React router crash course
55:54
Просмотров 37 тыс.