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!
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.
Are you familiar with React router V6? Server Side Rendering? Server actions? Remix vs Next js solution and all that? If you aren't it's normal to feel blown off by this tutorial. However, this tutorial is clear and consice. Find information about that come back to the video. It will make more sense.
This new data loading and fallback features is awesome. We could say goodbye for useEffect on client side, almost. Last feature i wish that file based routing. It is good for clean structure.
I like how clean loaders and actions are, but I don’t really like the facts that I need to define a single action inside a .tsx folder under routes dir. It feels weird for a component file to contains only function logics. For my apps’ use cases, sometimes I can have multiple mutations in a single page. Not really sure how this all will fit in. I am afraid all the actions codes can become a very big mess when it happens.
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
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.
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.
can someone please explain, how related profiles sidebar's star icon ( * ) is being updated, while click on the contact detail page's star icon ( * ) ?
The one thing I disagree with is the submit in the onChange event, refreshing the page and obtaining data on each keystroke. Plenty of information has been shared on this with React and all. We have been moving forward talking about optimisation which brought us to SSR and SSA to now have it all re-render on each keystroke.
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
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.
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
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.
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!
...and it's elegant with a small learning curve.
So much value in this video, very usefull to get hands on react router 7. Thanks to all the team!
great vid Brooks! very concise and helpful
Great and cohesive tutorial, thanks for sharing!
Awesome tech, awesome tutorial, thank you!
This is really, really good. Everything coming together
I have been waiting for this video! Thank you.
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.
Are you familiar with React router V6? Server Side Rendering? Server actions? Remix vs Next js solution and all that? If you aren't it's normal to feel blown off by this tutorial. However, this tutorial is clear and consice. Find information about that come back to the video. It will make more sense.
I can't believe I was fighting up with flat routes. This is soooo much easier once you understand it.
great video.. all worked.. would be nice though if there was git for the final code.
This new data loading and fallback features is awesome. We could say goodbye for useEffect on client side, almost. Last feature i wish that file based routing. It is good for clean structure.
Thanks Brooks. Very helpful.
I like how clean loaders and actions are, but I don’t really like the facts that I need to define a single action inside a .tsx folder under routes dir. It feels weird for a component file to contains only function logics.
For my apps’ use cases, sometimes I can have multiple mutations in a single page. Not really sure how this all will fit in. I am afraid all the actions codes can become a very big mess when it happens.
Great tutorial, thanks
How do you handle auth with the new React Router 7? Is it basically the same as Remix?
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
Very exciting - nice tutorial!
Awesome tutorial, thanks!
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.
Hey Brooks, why did you put the action function for creating new contacts in the root.tsx instead of sidebar.tsx?
It's upto you where you want to put it
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.
is there a repo for the full code? I wanna keep it as a reference...
can someone please explain, how related profiles sidebar's star icon ( * ) is being updated, while click on the contact detail page's star icon ( * ) ?
this is so exciting
This is great!
Awesome tutorial, ty!
But how do I or how should I access environment variables on the server?
nvm, I mixed some server-side and client-side code, so it worked in dev mode but did not compile as build in some weird way
Great tutorial!!
The one thing I disagree with is the submit in the onChange event, refreshing the page and obtaining data on each keystroke. Plenty of information has been shared on this with React and all. We have been moving forward talking about optimisation which brought us to SSR and SSA to now have it all re-render on each keystroke.
We cannot deploy to Vercel anymore after upgrading react-router 6 to 7 framework mode. Could you please give me reference or guide?
Thanks Brooks. 🎉
No problem!
Thanks for sharing
Hi, awesome video! Your autocomplete while renaming from to is insane! How did you get it to work like that?
I'm never using tanstack router ever again, thank god
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
@@bholmesdev I hate the docs, most of what you actually need is outdated... The focus is very narrowed on ssr
How can we build mdx blog site with RR7?
Is there any example repo
any plans to release docs on using supabase auth with the new rr v7? would be greatly appreciated
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.
still no middleware? I have to copy paste auth logic into every route?
We need it fast
We're working on it! Thanks for your patience
2:02 import from "@rem-... @react-router
haha
🥲
Love the tutorial! is it possible to get access to this repository? Thanks!
It's just in the react-router repo under the "tutorial/" directory
@@ReactTipsWithBrooks cool! I was looking for contacts and it was address book 🤦
When will we get middleware?? Really cool tutorial btw.
Soon!
Can someone please explain to me . Remix and react router: are these two different framework? Am currently building sites with remix.
Remix is now react-router (framework mode).
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
Remix is nothing but React ROUTER + "framework" features
@@danestevens1 wow that's amazing
@@danestevens1 wow this is awesome
thanks
Its finally stable, and I can stop using Next.js
By seeing things logically and implementing them, AI is nothing to this.
But where's authentication and authorization?
Remix is kill
Hello how are you doing?
I’m confused on what this channel even is if it’s now react router.
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.