React Router v6 Tutorial in 15 Minutes

React Router v6 is both the next version of React Router v5 but also @reach/router... it's a coming together of all the best things from both routers in an easy to use light-weight package. In this tutorial we'll cover all the basics from routing, nested routes, dynamic routes, linking to catch-all routes in just over 15 minutes.

[keepforever]

I'm working on migrating a medium (40-50 routes) react project from React Router V3 to V6. What's cool/ironic is that V3 -> V6 is more semantically similar than V3 -> V4 or V5 due to the semi-similar patter of IndexRoute found in V3 and the use of Outlet in V6.

[charlesxavier]

can someone explne me the const shoe = shoes[slug] part? Why coundt he just import in the useParam the name and img and use those?

[frostyghostman]

mate i can't tell you how much i would appreciate it if you threw up a vid combining mobx-react-lite (also because i refuse to use classes, opting for react function components exclusively) and react-router 5 or 6. im about half a minute away from desk flipping and lighting my house on fire trying to get the two to play nice...

[gullhassan]

ThankYou So much Brother! I am really really appreciate your work ....! I am facing an Error since 2 days ... After watch your video .. Finally I resolve it ... humble respect from Pakistan

[mateoc]

LIFE. SAVER. You have such great content. Haven't found anything on your channel yet that isn't helpful.

[ThuyNguyen-buge]

How about components with props passed in?

[rehananjum]

Outlet is not working now... Is there any alternative.. Please tell I'm waiting for your reply

[tofful]

How to use multiple Layouts where any page can have any Layout (not necessarily nested as your Launch demo) ?
LayoutDefault (Renders Header and Footer)
LayoutTwoColumns (Renders a 2 cols layout without Header and without Footer)
where the routes can be:
/signin --> LayoutTwoColumns
/singup --> LayoutTwoColumns
/ --> LayoutDefault
/profile --> LayoutDefault
Also if using LayoutDefault, it shouldn't re-render the Header and Footer for those who are using LayoutDefault
+Leigh Halliday

[CameronChardukian]

Great introductory video for v6. Thanks for sharing.

[darshaim]

Outlet Not working anymore! why someone don't even notice?

[Shoutiez]

Hi Leigh,
Could you make a tutorial on query string to fetch the data like in an eCommerce app that has a bunch of filters to be selected and get something like 'category=xxx&brand=yyy' then we use these params to fetch the data from api?
I couldn't find any resources on this topic If you can do it would be greate :)
Thanks.

[Jatin-nrbj]

Hi Leigh, I was reading this book called *"Learn React Hooks"* by Daniel Bugl on Orielly. I have covered all the basic hooks and now he is explaining community hooks which involves
"useResource from react-request-hook" - To fetch data
"navi and React-navi" - to add routing
"react-hookedup" - to manipulate data.

Now, I saw your "react-query" tutorial which I find really interesting. And v6 version of React -router which works amazingly well.
It feels like I am dumping more and more content in my skull as there seems to be endless stream of content out there. Do you see the above mentioned alternatives to replace the industry standards or should I just eyeball the content and not by heart it.

[omrimaher]

You really made it super easy many thanks

[赤尔]

It would be better if there were dynamic router

[muhammadumargulzar]

Hi,
Thanks for this amazing tutorial.
I'm having an issue. When I use Routes, I get this error > "Attempted import error: 'Routes' is not exported from 'react-router-dom'.".
What am I doing wrong here?

[var]

Love your content! Can you please do a video on next-redux-wrapper?

[stevereid]

Another excellent tutorial. The new nested routes are gonna make the project I'm working so much less painful 👍🏾

[Skia_]

I wish all of these tutorials of yours were to be taught using Typescript ;D

[nacirabogenschneider]

Great, I love your videos. Now I need one that shows me how to build custom hooks and one that explains useCallback with useEffect :D

[code_castle]

Por favor muestralo en español? Thaks 😎