React Router in Depth #3 - Router Provider, createBrowserRouter & Outlet

[@yerneroneroipas8668]

Just 6 minutes in and you helped me solve an issue chatgtp was walking in circles with. Thank you.

[@NetNinja]

Awesome :)

[@ifechukwu7379]

Your calm and cool voice is the key to your success. It is soothing to the mind while it allows the brain to understand something so cryptic as React js

[@traezeeofor]

Incidentally the 2 tutorials I first learned React Router are now outdated. This video did an excellent job of presenting version 6.4 to me. Thanks so much!

[@yu_pal]

This is one of the best code exspliners video I.have seen in years. Thank you

[@youcefmantas4944]

your a legend you better open a school called ninja way or something like this where u give all your lessons in a real compus cause man i live so far away but i would come to learn from the master of teaching !!

[@NetNinja]

Aha, thank you Youcef :) very kind!

[@Teddyrobinson]

I was gonna ask why it became so complicated, but I see everyone else already commented that too

[@musafirfisabillah6566]

I LOVING THIS COURSE SO FAR

[@NetNinja]

Awesome, thanks for watching Musafir!

[@DevDailyChallenge]

Thank you for introducing the new React Router

[@tsots2501]

this seems so much more complicated than the previous basic react router stuff for achieving the same effect. Could someone explain the benefit of this method over the previous lesson's?

[@terezachudejova4189]

I am wondering the same. I get the logic of the previous tutorial pretty fast. But this new version of concept seems too hard to grasp for me and I just did ctrl c, ctrl v without deeper understanding.

[@vishal40007]

The documentation says "enables the v6.4 data APIs like loaders, actions, fetchers and more."

[@maskman4821]

Thank you Shaun for introducing the new React Router, the new features such as layout is acting like Next, Nuxt, Sveltekit, I assume it is inspired by these advanced frameworks 😘

[@ibiyemisamuel6082]

Yes!🔥

[@Aditya-jo1of]

02:56 tree of routes🤣🤣 the way he spoke routes

[@romimaximus]

Reallly !!! ... So we went from a nice react-router layout and ease to work with, ....to this very confusing and complicated react-router layout !!! and the question is WHY !!! they have to complicate things ?? 😂😂😂😂

[@OnlyJavascript]

they nicely packed and found a house-fly inside it. All they did was to take out the housefly without making too much damage to the package. They at least have to strip off some layers before reaching it and took out the housefly. Guess what, release date has come and they decided to do it without wrapping it back. hence concluded. 😂😂😂😂

[@OnlyJavascript]

whatever, we have god's hands like NetNinja who can deliver it so good.

[@dariusz4434]

I totally agree. The normal BrowserRouter was so siple and made a lot of sense. But now this whole boilerplating is just makes no sense and complicate everything.

[@code2287]

I am not using the createbrowser router thing lol unless I have to ....the regular way still works fine but am down with outlet tho

[@surajbera865]

This router system is as complicated as that in angular...

[@wakeup_programmer]

wow that was a fabulous explanation, thank you so much net ninja, it was helpful

[@NetNinja]

Glad it was helpful! :) thanks for watching

[@stefanmasic1287]

I'm amaized. So clear definitions. Perfect video.

[@JJ-nm8sh]

Awesome vid. Very nicely explained about the element= on Route. 👍

[@NetNinja]

Thanks :) Glad you liked it!

[@FrostDrive]

holy crud they made the new way so much more complicated.

[@user-xedwsg]

yup, no unceseary!

[@khalidsultani1896]

thanks for posting this awesome series .

[@NetNinja]

Glad you enjoy it!

[@levm_prog1461]

Thanks for this video, you really helped me!

[@Ayoubased]

bro Im so confused with this outlet and why we use it, basically having Route path and createBrowserRouter with the path and element is enough to navigate, I have it in my code but dont understand it

[@mikaelnilsson8041]

Great video, but why can't I access a particular page by entering the URL directly in the URL-field of the browser? E.g. /page1. I can only access /page1 if I use a link on the web page, otherwise I get a 404. This works great during development, but not when its built. I guess I need to create URL rewrite rules to get it to work?

[@waltert9]

awesome stuff, really easy to understand now

[@NetNinja]

Good to hear that Walter :)

[@BillaSaheb786]

Great Marvelous....Also put vue 3 and nuxt 3 project

[@ahmeddotgg]

Thank you very much Shaun, will you also cover the method they used in tutorial in react-router-dom documentation page ? and thanks in advance

[@afewthoughts7755]

Any plans for new svelteKit course as the sveltekit 1.0 just released?

[@catreunion]

Thank you teacher 🙏🏻

[@NetNinja]

You are very welcome, thanks for your support Isaac!

[@scarredgaruga]

i have a question. If i have a sidebar for layout, should i placed in too? just like navbar?

[@sejalsankhe3786]

yup according to me you will just need to custom css it and add flex-column

[@stephenagyei2740]

great video...what if you have and admin page with login and register pages...And you dont want to show the header and footer on those pages

[@code2287]

You can make it a route path on its own which won't be part of the parent layout

[@looty20-q8q]

You're a legend.

[@AkashYadav-di6kd]

Thank you very much, sir

[@NetNinja]

You are most welcome! :)

[@Zezinhodovasco]

why my main outlet component stay in the same place of my header? And not below it? I did the same thing as you

[@vijaycheza]

Awesome videos dude!

[@NetNinja]

Thanks!

[@utkarshguruji8894]

In lecture 3rd , Navlink and links are working even without putting them in Homelayout as prop

[@bishwajeetpandey1570]

You are the best❤

[@GethushanRavichandran]

Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"

[@nickwoodward819]

...using only your left hand. thanks.

[@cheques_appeal]

Thanks for this!

[@NetNinja]

No problem, hope it helped :)

[@realgecko]

Thank you very much!

[@MostafaEl-Sayed-ld3he]

am I the only one who see this version is so complicated?

[@ibiyemisamuel6082]

It's seems, but it's not. It actually provides more flexibility.

[@Joshua.Developer]

@@ibiyemisamuel6082 New devs don't know enough to make those calls this is a headache bro. This is the bad thing about React too much flexibly great if your experienced but if your trying to learn.... there are prob 9 different ways of doing this.

[@fireace5920]

anyone know how to add page transition animation with router provider and framer motion? I've try putting animatepresence around the router provider and it has not been working

[@outletshelssy]

Excelente Video

[@NetNinja]

Thanks! :)

[@thedipushut]

How can i use this concept with protected route??

[@mohamedyoussef8835]

Awesome video +++++++++++ 😀

[@leooramone]

very useful

[@matinisnotdefined]

Thanks a lot

[@FullStackAce]

I was hoping this vid would have something on HashRouter, Oh Well :(

[@Saldymedis]

Osss... 👍

[@olegwork3355]

very informative thanks, their docs is completley unreadable... !

[@NetNinja]

Glad you found it helpful Oleg!

[@exe.m1dn1ght]

One question : Why ?

[@MosesKuria-m8e]

christ this was so confusing

[@michalnowak2181]

thx

[@towatch]

♥️♥️🔥

[@darelbvcr687]

NextJs > React

[@ibiyemisamuel6082]

Yes 🔥

[@mil0s251]

browser router

[@akrammekbal8936]

omg vujs is better

[@mt.designers]

Totally agree. I'm also coming from Vue.js and in comparison, React is just ridiculously complicated. I mean they could have just created all of that and put it in one component just like Vue "RouterView" component.

[@agoodmansaid]

Geez! what a way to OVER-COMPLICATE a straight forward concept. What ever happened to "if it ain't broke..."?

[@user-xedwsg]

This new way is TERRIBLE!

[@bissogood]

ok so what in the heck happen to just importing BrowserRouter as Router, Routes, Route...etc This is STUPID!