React Router V7 Tutorial - Routing, Nested Routes, Data Loading, Layouts...

In this comprehensive tutorial, dive deep into the new features of React Router version 7 and learn how to harness its power as a framework to build robust, data-driven React applications. From installation and routing setup to advanced topics like server-side rendering and data loading, this course covers it all. By the end, you'll have a solid understanding of how to streamline workflows and improve user experiences with React Router. Don’t forget to check the description for helpful resources and the complete code for the project!

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Timestamps
00:00 Intro to React Router v7
00:06 Overview of Remix and Routing
01:02 Setting Up a New Application
02:19 Basic Structure of React Router App
03:58 Understanding Root Component and Layout
06:05 How Routing Works in React Router
09:02 Creating Simple Routes and Components
10:14 Handling Route Parameters
12:27 Nested Routes Explained
19:08 Using Layouts for Nested Routes
22:04 Prefixing Routes for Better Organization
23:00 Rendering Strategies: Client vs. Server
26:18 Loading Data in React Router
30:36 Actions for Data Mutation
34:39 Navigating with Redirects and Links
40:10 Using NavLink for Active States
46:07 Implementing Pending UI for Navigation
50:06 Conclusion and Resources

#reactjs #tutorial

[developerdeveloper-tl]

your tutorial makes much more sense in understanding this new react router v7 than its official documentation 😆😆

[indiansniper]

Hey man you are doing great work, your channel has proven a gold mine for me as a full stack dev from past many months...

I was just trying to find react router video yesterday, but found none except for the one you did 3 years back, then after getting home I just found that you just uploaded the brand new video on this topic.

EDIT: Also anyone who wants to learn react after learning basics just needs to watch your channel's latest videos and he/she could master the whole react. Thanks for that too

[jonathanpark]

Wow! Please do more of this one! This one seems to be the fastest way + secure and can create beautiful UI. Hope you would do some cool projects with this one like the social media one you did

[tylerstark]

Wondeful tutorial, short and on points, subscribed.

[garywallen]

Love it! Please make more series on React Router v7!

[alexandersuvorov]

I think it's necessary to show how to do authorization gates. This is absolute must for modern apps.

[thinhnguyen]

Awesome. Hope your react v19 videos released.

[mateussoares]

hey pedro, awesome content as always. do you plan on making react-router backend focused vids? api routes, auth, that kind of stuff?

[Nilankar]

That’s a good one to review—much appreciated!

[AlshafarazGazi]

Awesome vid mate.. I wondered how one would do dynamic route setup like loading route paths and elements for the RouteProvider.

[akashpatil-vorr]

@pedro, You're real deal man, no bull****

[sahalimran]

thank you very much for this you delivered what i asked you previously thank you

[AdrienMangeot]

Great to see it in action! How would you handle a router setup where routes are translated? For example if we want to have a single config to use /en/peter, /es/pedro, /fr/pierre, etc? The equivalent of a <Route path={formatPath(...)} element={<Pedro />} /> ?

[phantazzor]

Does it has the prefetch prop like on remix for the Link component to be used on hover?

[bathiutube]

This is an excellent tutorial. I was able to follow along. I am trying to extend it by listing the posts and when clicking one of the posts, it opens to the right while the posts list is in left. How can I achieve it. When I click the posts currently is overwrites the posts list page

[abdulsami]

wait so if I have a react project already how would I incorporate react router into it, asking since the file structure is different, the entry point in a typical react+vite app is the main file while its root here? sorry this might be a basic quesiton but I am beginner here

[ensiyehkhani]

Hello, thank you for the React tutorial I had a question, is react-router-7 comparable to next js 15? Please compare for me briefly and I want you to compare only in terms of SEO and cache on the server side, because I feel that react-router is better in other cases.

[danielvalencia]

Can i create a folder inside routes folder to define nested routes components ? For example if I have the route "posts/:postId/edit" I would prefer to have a parent folder 'posts' instead of put all the routes inside a single root folder (routes)

[adamafzal]

I'm using <Link> to navigate to a component which I need to send props to, in react router terms thats using state, which is then retrieved using useLocation() right? So how do I pass state through <Link? I'm using state={{some_key: some_value}} but it still comes up as null on the other side

[ramprasadchauhan]

Please make full stack project with this framework, how to create api. I want to explore this framework as full stack, but not much content found. If make simple like todo application not use another service, using framework how to create backend.