Learn React Router 6

Learn React Router 6

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

位教师：Bob Ziroll

包含在 Coursera Plus 中

了解更多

6个模块

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

4.8

（14 条评论）

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

6个模块

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

4.8

（14 条评论）

中级等级

推荐体验

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 Assignment15分钟

19个插件总计80分钟

Welcome to interactive lessons!1分钟
Introduction to React Router 63分钟
Multi-page vs single-page apps5分钟
React Router Setup & BrowserRouter3分钟
Routes3分钟
BrowserRouter & Routes challenge1分钟
Route, path, & element4分钟
Quick Re-org1分钟
Links in React Router4分钟
VanLife project bootstrapping8分钟
Initial Deploy to Netlify12分钟
Mirage JS Server2分钟
Challenge: Vans Page - Part 12分钟
Challenge: Vans Page - Part 29分钟
Route Params - part 14分钟
Route Params - part 22分钟
Route Params part 3.1 - useParams() & challenge5分钟
Route Params part 3.2 - useParams() challenge7分钟
Route Params Quiz4分钟

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 Assignment20分钟

23个插件总计126分钟

Nested Routes Intro9分钟
Fixing the Navbar with a Layout Route5分钟
Fixing the Navbar with a Layout Route part 28分钟
Bootstrap the Host pages4分钟
Nesting the /host routes4分钟
Creating the Host Layout6分钟
Relative Paths4分钟
Index Routes4分钟
To nest or not to nest?5分钟
Nested Routes Quiz5分钟
Add Footer3分钟
NavLink7分钟
Active Link Styling with NavLink4分钟
Active Link Styling with NavLink - part 25分钟
Adding Host Vans Routes5分钟
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages3分钟
Building out the Host Van Detail page9分钟
Relative Links7分钟
Back to all vans5分钟
Add /host/vans/:id Nested Routes8分钟
Add the Final Navbar!7分钟
Outlet Context6分钟
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 Assignment15分钟

23个插件总计96分钟

Search Params Intro7分钟
useSearchParams4分钟
Challenge: Set up search params in VanLife5分钟
Filter the array w/ the search param5分钟
Challenge: Filter the vans in VanLife2分钟
Using Links to add search params3分钟
Challenge: Filter the vans with Links3分钟
Using the search params setter function4分钟
Challenge: Filter the vans with a setter function3分钟
Caveats to setting params2分钟
Merging search params with Links6分钟
Merging search params with the setSearchParams function5分钟
Challenge: Conditional rendering practice5分钟
Fix remaining absolute paths2分钟
Back to all vans2分钟
Link state6分钟
useLocation8分钟
Challenge: conditionally render the back button text3分钟
404 Page6分钟
"Happy Path" vs. "Sad Path"3分钟
Quick update to our fetching code3分钟
Coding the Sad Path - Loading state4分钟
Coding the Sad Path - Error handling5分钟

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 Assignment10分钟

12个插件总计40分钟

Loaders intro4分钟
createBrowserRouter6分钟
Setting up the data router3分钟
Loader function3分钟
Challenge: Vans List Loader1分钟
useLoaderData2分钟
Challenge: useLoaderData in Vans List page2分钟
Use the loader data instead of the useEffect4分钟
Loaders Quiz3分钟
Handling errors3分钟
Add errorElement to vans route3分钟
useRouteError6分钟

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 Assignment30分钟

40个插件总计164分钟

Initial Login Form2分钟
Note from the future: importing image assets in Vite3分钟
Protected Routes Intro6分钟
Protected Routes - AuthRequired Layout Route4分钟
Protected Routes - Conditionally send to /login page4分钟
Protected Routes Quiz2分钟
Protected Routes - with loaders5分钟
Protected Routes w/ loaders4分钟
Parallel Loaders demo4分钟
Challenge: Protected Routes w/ loaders1分钟
Challenge: Protected Routes in VanLife - Part 12分钟
Aside challenge: move remaining fetching to loaders - Part 16分钟
Aside challenge: move remaining fetching to loaders - Part 24分钟
Challenge: Protected Routes in VanLife - Part 28分钟
Send login message prompt to login page3分钟
Consume message from search param on login page8分钟
Pass message to Login page8分钟
🌶️ Take: Forms in React are bad2分钟
Setting up for authentication - happy path5分钟
Setting up for authentication - sad path8分钟
useNavigate()4分钟
React Router Form Component3分钟
Setting up the Action function4分钟
Add form and action to VanLife2分钟
Action function - params2分钟
Action function - request3分钟
Get form data in VanLife2分钟
Use data in action to log in3分钟
Better (but still fake) auth4分钟
Challenge: send user to /host route after log in3分钟
Form replace5分钟
useActionData4分钟
Action error handling3分钟
Action error handling in VanLife3分钟
useNavigation()4分钟
useNavigation in VanLife4分钟
get previous route pathname7分钟
redirectTo - part 14分钟
redirectTo - part 26分钟
redirectTo in VanLife5分钟

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 Assignment30分钟

18个插件总计73分钟

Deferring data3分钟
Promises and defer()6分钟
defer getVans()2分钟
Await component7分钟
Await in Vans route5分钟
Await vans refactor2分钟
React Suspense5分钟
Suspense in VanLife3分钟
Putting it all together - defer, Await, Suspense in HostVans5分钟
errorElements in remaining van loading pages3分钟
Placeholders are gone! 🎉2分钟
Cloud Firestore Setup 🔥6分钟
Cloud Firestore Code Setup3分钟
Collection reference and getVans() function7分钟
Create getVan() function5分钟
Refactor getHostVans function4分钟
Final loose ends2分钟
Outro3分钟

获得职业证书

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

位教师

授课教师评分

5.0 (7个评价)

Bob Ziroll

Scrimba

14 门课程43,755 名学生

提供方

Scrimba

从 Mobile and Web Development 浏览更多内容

状态：免费试用
Scrimba
Learn Advanced React
课程
状态：免费试用
Scrimba
Learn React
课程
Packt
ReactJS - The Beginner Masterclass
课程
状态：免费试用
Meta
React Basics
课程

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

Felipe M.

自 2018开始学习的学生

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

Jennifer J.

自 2020开始学习的学生

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

Larry W.

自 2021开始学习的学生

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

Chaitanya A.

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

学生评论

4.8

14 条评论

5 stars
78.57%
4 stars
21.42%
3 stars
0%
2 stars
0%
1 star
0%

显示 3/14 个

已于 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.