Learn React Router 6

通过 Coursera Plus 提高技能，仅需 239 美元/年（原价 399 美元）。立即节省

Learn React Router 6

本课程是 Advanced React Skills 专项课程的一部分

位教师：Bob Ziroll

包含在中

了解更多

6个模块

深入了解一个主题并学习基础知识。

16 条评论

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

6个模块

深入了解一个主题并学习基础知识。

16 条评论

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将获得的技能

您将学习的工具

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

6 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

本课程是 Advanced React Skills 专项课程专项课程的一部分

在注册此课程时，您还会同时注册此专项课程。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有6个模块

Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever.

In this course, you’ll learn the most important parts of the React Router (v6) library while building an app called “VanLife”, an app for renting decked-out travel vans for your next road trip adventure. This course is filled with interactive coding challenges, small and large, to help drill in the topics you’ll be learning, all while building the main VanLife project. Repetition and practice is the real way to avoid tutorial hell and build the muscle memory needed to truly understand what you’re learning. So if you’re looking to escape tutorial hell, this course (and Scrimba courses in general) is the way to go!

Take your first steps with React Router and become familiar with the course project, a cool van rental site.

涵盖的内容

1个作业19个插件

1个作业总计15分钟

React Router Section 1 Graded Assignment 15分钟

19个插件总计80分钟

Welcome to interactive lessons! 1分钟
Introduction to React Router 6 3分钟
Multi-page vs single-page apps 5分钟
React Router Setup & BrowserRouter 3分钟
Routes 3分钟
BrowserRouter & Routes challenge 1分钟
Route, path, & element 4分钟
Quick Re-org 1分钟
Links in React Router 4分钟
VanLife project bootstrapping 8分钟
Initial Deploy to Netlify 12分钟
Mirage JS Server 2分钟
Challenge: Vans Page - Part 1 2分钟
Challenge: Vans Page - Part 2 9分钟
Route Params - part 1 4分钟
Route Params - part 2 2分钟
Route Params part 3.1 - useParams() & challenge 5分钟
Route Params part 3.2 - useParams() challenge 7分钟
Route Params Quiz 4分钟

The learning module explores nested routes in React Router 6, which are used to create complex and hierarchical route structures within React applications.

涵盖的内容

1个作业23个插件

1个作业总计20分钟

React Router Section 2 Graded Assignment 20分钟

23个插件总计126分钟

Nested Routes Intro 9分钟
Fixing the Navbar with a Layout Route 5分钟
Fixing the Navbar with a Layout Route part 2 8分钟
Bootstrap the Host pages 4分钟
Nesting the /host routes 4分钟
Creating the Host Layout 6分钟
Relative Paths 4分钟
Index Routes 4分钟
To nest or not to nest? 5分钟
Nested Routes Quiz 5分钟
Add Footer 3分钟
NavLink 7分钟
Active Link Styling with NavLink 4分钟
Active Link Styling with NavLink - part 2 5分钟
Adding Host Vans Routes 5分钟
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages 3分钟
Building out the Host Van Detail page 9分钟
Relative Links 7分钟
Back to all vans 5分钟
Add /host/vans/:id Nested Routes 8分钟
Add the Final Navbar! 7分钟
Outlet Context 6分钟
Update deployed version on Netlify! 3分钟

This module dives into the usage of search params and links in React Router 6, empowering developers to implement navigation with query parameters in their React applications.

涵盖的内容

1个作业23个插件

1个作业总计15分钟

React Router Section 3 Graded Assignment 15分钟

23个插件总计96分钟

Search Params Intro 7分钟
useSearchParams 4分钟
Challenge: Set up search params in VanLife 5分钟
Filter the array w/ the search param 5分钟
Challenge: Filter the vans in VanLife 2分钟
Using Links to add search params 3分钟
Challenge: Filter the vans with Links 3分钟
Using the search params setter function 4分钟
Challenge: Filter the vans with a setter function 3分钟
Caveats to setting params 2分钟
Merging search params with Links 6分钟
Merging search params with the setSearchParams function 5分钟
Challenge: Conditional rendering practice 5分钟
Fix remaining absolute paths 2分钟
Back to all vans 2分钟
Link state 6分钟
useLocation 8分钟
Challenge: conditionally render the back button text 3分钟
404 Page 6分钟
"Happy Path" vs. "Sad Path" 3分钟
Quick update to our fetching code 3分钟
Coding the Sad Path - Loading state 4分钟
Coding the Sad Path - Error handling 5分钟

This module explores into loaders and errors in React Router 6, which are used to handle loading states and error handling within their applications' routing components.

涵盖的内容

1个作业12个插件

1个作业总计10分钟

React Router Section 4 Graded Assignment 10分钟

12个插件总计40分钟

Loaders intro 4分钟
createBrowserRouter 6分钟
Setting up the data router 3分钟
Loader function 3分钟
Challenge: Vans List Loader 1分钟
useLoaderData 2分钟
Challenge: useLoaderData in Vans List page 2分钟
Use the loader data instead of the useEffect 4分钟
Loaders Quiz 3分钟
Handling errors 3分钟
Add errorElement to vans route 3分钟
useRouteError 6分钟

Explore Actions and Protected Routes in React Router 6,. Learn to implement authentication and authorization by protecting routes and performing actions based on user roles or permissions.

涵盖的内容

1个作业40个插件

1个作业总计30分钟

React Router Section 5 Graded Assignment 30分钟

40个插件总计164分钟

Initial Login Form 2分钟
Note from the future: importing image assets in Vite 3分钟
Protected Routes Intro 6分钟
Protected Routes - AuthRequired Layout Route 4分钟
Protected Routes - Conditionally send to /login page 4分钟
Protected Routes Quiz 2分钟
Protected Routes - with loaders 5分钟
Protected Routes w/ loaders 4分钟
Parallel Loaders demo 4分钟
Challenge: Protected Routes w/ loaders 1分钟
Challenge: Protected Routes in VanLife - Part 1 2分钟
Aside challenge: move remaining fetching to loaders - Part 1 6分钟
Aside challenge: move remaining fetching to loaders - Part 2 4分钟
Challenge: Protected Routes in VanLife - Part 2 8分钟
Send login message prompt to login page 3分钟
Consume message from search param on login page 8分钟
Pass message to Login page 8分钟
🌶️ Take: Forms in React are bad 2分钟
Setting up for authentication - happy path 5分钟
Setting up for authentication - sad path 8分钟
useNavigate() 4分钟
React Router Form Component 3分钟
Setting up the Action function 4分钟
Add form and action to VanLife 2分钟
Action function - params 2分钟
Action function - request 3分钟
Get form data in VanLife 2分钟
Use data in action to log in 3分钟
Better (but still fake) auth 4分钟
Challenge: send user to /host route after log in 3分钟
Form replace 5分钟
useActionData 4分钟
Action error handling 3分钟
Action error handling in VanLife 3分钟
useNavigation() 4分钟
useNavigation in VanLife 4分钟
get previous route pathname 7分钟
redirectTo - part 1 4分钟
redirectTo - part 2 6分钟
redirectTo in VanLife 5分钟

This module delves into deferred data in React Router 6, which allows developers to efficiently load and display data on-demand for specific routes, improving performance and user experience.

涵盖的内容

1个作业18个插件

1个作业总计30分钟

React Router Section 6 Graded Assignment 30分钟

18个插件总计73分钟

Deferring data 3分钟
Promises and defer() 6分钟
defer getVans() 2分钟
Await component 7分钟
Await in Vans route 5分钟
Await vans refactor 2分钟
React Suspense 5分钟
Suspense in VanLife 3分钟
Putting it all together - defer, Await, Suspense in HostVans 5分钟
errorElements in remaining van loading pages 3分钟
Placeholders are gone! 🎉 2分钟
Cloud Firestore Setup 🔥 6分钟
Cloud Firestore Code Setup 3分钟
Collection reference and getVans() function 7分钟
Create getVan() function 5分钟
Refactor getHostVans function 4分钟
Final loose ends 2分钟
Outro 3分钟

获得职业证书

将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。

位教师

授课教师评分

(8个评价)

Bob Ziroll

Scrimba

14 门课程 52,892 名学生

提供方

Scrimba

从 Mobile and Web Development 浏览更多内容

Packt
Applied React – Projects, Routing & State
课程
Scrimba
Learn React
课程
Scrimba
Learn Advanced React
课程
Scrimba
React Beginner Project: Build a Movie Search App
课程

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

学生评论

5 stars
81.25%
4 stars
18.75%
3 stars
0%
2 stars
0%
1 star
0%

显示 3/16 个

已于 Dec 4, 2023审阅

This course is fantastic throughout and it teaches you way more than the name specifies. Perfect for slow but detailed learners like myself!

已于 Feb 20, 2025审阅

good course,but working with Firebase was not easy..

已于 Nov 2, 2024审阅

Extremely well thought out course. Great teaching style

查看更多评论

通过 Coursera Plus 开启新生涯

无限制访问 10,000+ 世界一流的课程、实践项目和就业就绪证书课程 - 所有这些都包含在您的订阅中

了解更多

通过在线学位推动您的职业生涯

获取世界一流大学的学位 - 100% 在线

探索学位

加入超过 3400 家选择 Coursera for Business 的全球公司

提升员工的技能，使其在数字经济中脱颖而出

了解更多

常见问题

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.