React Router 6.4 - Getting Started

Get started with React Router 6.4, learn how it differs from 6.x and how you can use its amazing new data-fetching (and submission) features!

(check out different branches for starting code etc.)

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[abdullahbelkaid]

I was looking for this tutorial because i got lost with the documentation especially they made it using vite, thank you so much

[SrimalPriyanga]

Really impressive tutorial, Obvious on to the point without annoying sounds and talks. Thank you! Love It! Subscribed!

[omarkarim]

Angular has had this since v2 with guards

[transfer]

Thank you!
I find myself going back to this video whenever I forget anything about RR's new features. Great video!

[pyrocentury]

How would one leverage the new data features in v6.4+ when integrating with state management like Redux or HTTP client like Axios? Seem like there is a lot of refactoring to do if we want to bring these features in to an existing project. A lot of these libraries require accessing the history outside the react context. I would appreciate a video covering refactoring a project like that to see how you would tackle some of the challenges.

[SahilRajput]

Amazing video, Its so lovely to see all this from you.

I would can not read docs of this coz I really wanted to see it from people like you..
Love you man!

[orlandocastaneda]

this is super useful, i was a bit stuck with the documentation and this tutorial helped me a lot to understand some things

[dimitaruzunov]

The video is as always perfect!!! The problem that bothers me is where is "Separation of concerns" gone? The router needs just to "route"/render the required page, but not messing with data loading (task for service layer) and error handling (again another taks). How such app is going to be scallable and testable...

[thesunabsolute]

Maybe I'm in the minority here, but I am not a fan of the router taking over all of this additional functionality. I get that they are trying to unify React Router with their Remix Run framework, but IMO a router should just be a router. There are other libraries like SWF and React Query that already make data fetching easy and trivial. I can already see this making the testing story more complex, by now having to mock the data fetching layer ontop of already mocking out the browser router. I just prefer functionality to be kept separate. I am much more excited for the Tanstack Router which is on the way.

[patrickjreid]

Max this is so helpful. a version with redux toolkit would be incredible. I know Remix makes redux largely unnecessary but I am dealing with an ecommerce site that has a usecase for it. Also using it with things like react-query would be a cool tutorial too. Thanks for all your great content!

[gentlecoder]

It's obvious they make all these fancy features just for the sake of Remix. I don't need all of that in my React app. In more or less serious project no one handles data fetching manually, we have react-query, apollo, rtk-query etc for such things.

[skoodath]

Thanks for the tutorial. I was kind of getting lost somewhere between v6.3 and v6.4. This one helped!

[ktoscos]

Very great tutorial, i have learnt a lot. Certainly I will check others materials :)

[krtrvi]

Thanks Amazing tutorial, very much helped to update the react router 5 to 6 without any issues :)

[shotgun]

Thank you for the react 6.4 new features guide. It's very helpful.

[theuniverse]

Really cool! I'm wondering how complicated it could be if you started using React Router 6.4 and then wanted to move to NextJS

[abdelhameedhamdy]

This exactly remix style to load data using hooks without touching useEffect

[ktoscos]

Very helpful video, I am wonderin if component need wait for fetch data before render, would it make effect of page suspension?

[ed-jamal]

Thank you for this video
Could you tak a look at tankstack/table
Update from v7 to v8

[jamesdenmark]

It's great tutorial, and straight to the point! The only missing thing he didn't mention in this video is how to get the types from the deferred loader! I think react-router. didn't create type utils for that?