React Router 7 Tutorial

[@bholmesdev]

You did it. You finally made routing simple. The answer wasn’t pure file based or pure config based, but somewhere in the codegen middle. Thanks for pushing through to find the solution!

[@MrJeyOnCrossfit]

So much value in this video, very usefull to get hands on react router 7. Thanks to all the team!

[@ginger-viking]

Great tutorial, thanks

[@aharef]

Awesome tech, awesome tutorial, thank you!

[@the_beckers_food]

I have been waiting for this video! Thank you.

[@shivamjhaa]

This is really, really good. Everything coming together

[@sajadtorkamani9399]

Very exciting - nice tutorial!

[@iriel492ki]

How do you handle auth with the new React Router 7? Is it basically the same as Remix?

[@Remix-Run]

Yes, all strategies that worked in Remix apply in React Router if you're using the Vite plugin (framework mode) The popular library remix-auth has already been updated to support React Router 7: github.com/sergiodxa/remix-auth

[@eleah2665]

Thanks Brooks. Very helpful.

[@brianmwangi6599]

Hey Brooks, why did you put the action function for creating new contacts in the root.tsx instead of sidebar.tsx?

[@Adityacode]

It's upto you where you want to put it

[@ReactTipsWithBrooks]

I probably should have explained it better, but it's because you can't have an action in a layout route, since a layout doesn't have a URL and to trigger an action you have to POST (or PUT or whatever non-GET thing you're doing) to a specific URL. In this case the root is where the form would POST to by default default ("localhost:5173/"), so I just put it in there. You could set the action field on the form to whatever url you want and create an action function in a resource route (like we did with routes/destroy-contact) if you want to, which honestly might be a little more clear.

[@HaroldAnderson-of6gb]

Is there a simpler introduction to React Router 7? This video went over my head very quickly. I have tried unsuccessfully to work through the tutorial on the documentation, but it does not explain the concepts either. Thanks.

[@refeals]

Awesome tutorial, thanks!

[@philippeaka2772]

Great tutorial!!

[@thethmuueinsoe]

We cannot deploy to Vercel anymore after upgrading react-router 6 to 7 framework mode. Could you please give me reference or guide?

[@saurabh75prakash]

How can we build mdx blog site with RR7? Is there any example repo

[@frozen_tortus]

how would you quickly go to visit route file from routes? cmd+click wont work because its not full path? Also, you cant auto complete corect? I tried it and so far my experience was painfull with gotchas like that. Editor shows all is fine, then I open an app and its not working, turns out path is wrong, and terminal shows err, and its not like you made errors easy to read.

[@AlexanderDensley]

any plans to release docs on using supabase auth with the new rr v7? would be greatly appreciated

[@ReactTipsWithBrooks]

Probably not on our site, but there are likely some community resources out there, and we expect supabase to create some resources as well. Given that they're the experts anything they create is going to be better than what we do. Additionally, as soon as we create a doc for one auth/database provider, we feel the need to create docs for all of them. They quickly get out of date and prove to not be very useful, so we find it better when the community/providers themselves create these resources.

[@designerjehovah4453]

this is so exciting

[@qapplor]

still no middleware? I have to copy paste auth logic into every route?

[@Adityacode]

We need it fast

[@ReactTipsWithBrooks]

We're working on it! Thanks for your patience

[@manutechashuman]

Love the tutorial! is it possible to get access to this repository? Thanks!

[@ReactTipsWithBrooks]

It's just in the react-router repo under the "tutorial/" directory

[@manutechashuman]

@@ReactTipsWithBrooks cool! I was looking for contacts and it was address book 🤦

[@Adityacode]

When will we get middleware?? Really cool tutorial btw.

[@ReactTipsWithBrooks]

Soon!

[@jeffsegovia00]

Thanks Brooks. 🎉

[@ReactTipsWithBrooks]

No problem!

[@TheMERABANABER]

I'm never using tanstack router ever again, thank god

[@bholmesdev]

Yeah, I wanted to enjoy it but I was slammed with a wall of complexity when onboarding. Partially the docs, partially the verbose API design. RR v7 feels far nicer to start

[@TheMERABANABER]

@@bholmesdev I hate the docs, most of what you actually need is outdated... The focus is very narrowed on ssr

[@AbuBakr1]

Can someone please explain to me . Remix and react router: are these two different framework? Am currently building sites with remix.

[@danestevens1]

Remix is now react-router (framework mode).

[@Remix-Run]

What @danestevens1 said We announced this direction back in May and finished the work not to long ago You can read more about our strategy here: remix.run/blog/incremental-path-to-react-19

[@lamhung4899]

Remix is nothing but React ROUTER + "framework" features

[@AbuBakr1]

@@danestevens1 wow that's amazing

[@AbuBakr1]

@@danestevens1 wow this is awesome

[@prashlovessamosa]

Thanks for sharing

[@vfshera]

THis is great!

[@ytuser6276]

2:02 import from "@rem-... @react-router haha

[@ReactTipsWithBrooks]

🥲

[@itsZavier_1]

thanks

[@dodiiiii1]

Great content. Very intuitive and fluid. Thanks Brooks! Q: How soon is RR7 integrating in hydrogen? The Shopify Winter Edition was disappointing in that regard.