React Router in Depth #3 - Router Provider, createBrowserRouter & Outlet
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- In this React Router tutorial, you'll learn how to create a browser router th "new way", using the createBrowserRouter function. You'll also learn about the Router Provider & Outlet components.
⭐⭐ 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 TH-cam - • Full React Tutorial #1...
🐱💻 React Router Docs - reactrouter.co...
🐱💻 VS Code - code.visualstu...
Just 6 minutes in and you helped me solve an issue chatgtp was walking in circles with. Thank you.
Awesome :)
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
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!
This is one of the best code exspliners video I.have seen in years. Thank you
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 !!
Aha, thank you Youcef :) very kind!
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 😘
Yes!🔥
I was gonna ask why it became so complicated, but I see everyone else already commented that too
I LOVING THIS COURSE SO FAR
Awesome, thanks for watching Musafir!
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 ?? 😂😂😂😂
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. 😂😂😂😂
whatever, we have god's hands like NetNinja who can deliver it so good.
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.
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
This router system is as complicated as that in angular...
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?
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.
The documentation says "enables the v6.4 data APIs like loaders, actions, fetchers and more."
Thank you for introducing the new React Router
wow that was a fabulous explanation, thank you so much net ninja, it was helpful
Glad it was helpful! :) thanks for watching
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?
Awesome vid. Very nicely explained about the element= on Route. 👍
Thanks :) Glad you liked it!
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
Any plans for new svelteKit course as the sveltekit 1.0 just released?
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
I'm amaized. So clear definitions. Perfect video.
thanks for posting this awesome series .
Glad you enjoy it!
holy crud they made the new way so much more complicated.
yup, no unceseary!
Thanks for this video, you really helped me!
02:56 tree of routes🤣🤣 the way he spoke routes
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
You can make it a route path on its own which won't be part of the parent layout
i have a question. If i have a sidebar for layout, should i placed in too? just like navbar?
yup according to me you will just need to custom css it and add flex-column
Thank you very much, sir
You are most welcome! :)
awesome stuff, really easy to understand now
Good to hear that Walter :)
Great Marvelous....Also put vue 3 and nuxt 3 project
Thank you very much!
Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"
...using only your left hand. thanks.
Thank you teacher 🙏🏻
You are very welcome, thanks for your support Isaac!
In lecture 3rd , Navlink and links are working even without putting them in Homelayout as prop
Thanks for this!
No problem, hope it helped :)
You're a legend.
Excelente Video
Thanks! :)
very useful
why my main outlet component stay in the same place of my header? And not below it? I did the same thing as you
Awesome videos dude!
Thanks!
You are the best❤
How can i use this concept with protected route??
Thanks a lot
am I the only one who see this version is so complicated?
It's seems, but it's not. It actually provides more flexibility.
@@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.
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
thx
Awesome video +++++++++++ 😀
very informative thanks, their docs is completley unreadable... !
Glad you found it helpful Oleg!
I was hoping this vid would have something on HashRouter, Oh Well :(
♥️♥️🔥
One question : Why ?
christ this was so confusing
omg vujs is better
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.
Geez! what a way to OVER-COMPLICATE a straight forward concept. What ever happened to "if it ain't broke..."?
browser router
NextJs > React
Yes 🔥
This new way is TERRIBLE!
ok so what in the heck happen to just importing BrowserRouter as Router, Routes, Route...etc This is STUPID!
ahh this reminds me of nextjs