К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Learn React Router 6 · LearnSpace
Назад в каталог
courseraПрограммирование

Learn React Router 6

Курс от Scrimba
Средний≈ 11.7 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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!

Навыки, которые вы освоите

React.jsAuthenticationsAuthorization (Computing)Frontend PerformanceWeb ApplicationsWeb DevelopmentUser Experience Design

Программа курса

6 модулей · 141 учебных материалов

01Introduction to React Router20 материалов

Introduction to React Router

Welcome to interactive lessons!PLUGINIntroduction to React Router 6PLUGINMulti-page vs single-page appsPLUGINReact Router Setup & BrowserRouterPLUGIN

Учитесь у экспертов

Bob Ziroll

Преподаватель курса

Learn React Router 6
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 11.7 ч

6 модулей

Язык: Английский

Часть программы вашего университета
RoutesPLUGIN
BrowserRouter & Routes challengePLUGIN
Route, path, & elementPLUGIN
Quick Re-orgPLUGIN
Links in React RouterPLUGIN
VanLife project bootstrappingPLUGIN
Initial Deploy to NetlifyPLUGIN
Mirage JS ServerPLUGIN
Challenge: Vans Page - Part 1PLUGIN
Challenge: Vans Page - Part 2PLUGIN
Route Params - part 1PLUGIN
Route Params - part 2PLUGIN
Route Params part 3.1 - useParams() & challengePLUGIN
Route Params part 3.2 - useParams() challengePLUGIN
Route Params QuizPLUGIN

React Router Section 1 Quiz

React Router Section 1 Graded AssignmentЗадание
02Nested Routes24 материалов

Nested Routes

Nested Routes IntroPLUGINFixing the Navbar with a Layout RoutePLUGINFixing the Navbar with a Layout Route part 2PLUGINBootstrap the Host pagesPLUGINNesting the /host routesPLUGINCreating the Host LayoutPLUGINRelative PathsPLUGINIndex RoutesPLUGINTo nest or not to nest?PLUGINNested Routes QuizPLUGINAdd FooterPLUGINNavLinkPLUGINActive Link Styling with NavLinkPLUGINActive Link Styling with NavLink - part 2PLUGINAdding Host Vans RoutesPLUGIN🔀 Optional Side Quest - Building out the Host Vans List and Detail PagesPLUGINBuilding out the Host Van Detail pagePLUGINRelative LinksPLUGINBack to all vansPLUGINAdd /host/vans/:id Nested RoutesPLUGINAdd the Final Navbar!PLUGINOutlet ContextPLUGINUpdate deployed version on Netlify!PLUGIN

React Router Section 2 Quiz

React Router Section 2 Graded AssignmentЗадание
03Search Params and Links24 материалов

Search Params and Links

Search Params IntroPLUGINuseSearchParamsPLUGINChallenge: Set up search params in VanLifePLUGINFilter the array w/ the search paramPLUGINChallenge: Filter the vans in VanLifePLUGINUsing Links to add search paramsPLUGINChallenge: Filter the vans with LinksPLUGINUsing the search params setter functionPLUGINChallenge: Filter the vans with a setter functionPLUGINCaveats to setting paramsPLUGINMerging search params with LinksPLUGINMerging search params with the setSearchParams functionPLUGINChallenge: Conditional rendering practicePLUGINFix remaining absolute pathsPLUGINBack to all vansPLUGINLink statePLUGINuseLocationPLUGINChallenge: conditionally render the back button textPLUGIN404 PagePLUGIN"Happy Path" vs. "Sad Path"PLUGINQuick update to our fetching codePLUGINCoding the Sad Path - Loading statePLUGINCoding the Sad Path - Error handlingPLUGIN

React Router Section 3 Quiz

React Router Section 3 Graded AssignmentЗадание
04Loaders and Errors13 материалов

Loaders and Errors

Loaders introPLUGINcreateBrowserRouterPLUGINSetting up the data routerPLUGINLoader functionPLUGINChallenge: Vans List LoaderPLUGINuseLoaderDataPLUGINChallenge: useLoaderData in Vans List pagePLUGINUse the loader data instead of the useEffectPLUGINLoaders QuizPLUGINHandling errorsPLUGINAdd errorElement to vans routePLUGINuseRouteErrorPLUGIN

React Router Section 4 Quiz

React Router Section 4 Graded AssignmentЗадание
05Actions and Protected Routes41 материалов

Actions and Protected Routes

Initial Login FormPLUGINNote from the future: importing image assets in VitePLUGINProtected Routes IntroPLUGINProtected Routes - AuthRequired Layout RoutePLUGINProtected Routes - Conditionally send to /login pagePLUGINProtected Routes QuizPLUGINProtected Routes - with loadersPLUGINProtected Routes w/ loadersPLUGINParallel Loaders demoPLUGINChallenge: Protected Routes w/ loadersPLUGINChallenge: Protected Routes in VanLife - Part 1PLUGINAside challenge: move remaining fetching to loaders - Part 1PLUGINAside challenge: move remaining fetching to loaders - Part 2PLUGINChallenge: Protected Routes in VanLife - Part 2PLUGINSend login message prompt to login pagePLUGINConsume message from search param on login pagePLUGINPass message to Login pagePLUGIN🌶️ Take: Forms in React are badPLUGINSetting up for authentication - happy pathPLUGINSetting up for authentication - sad pathPLUGINuseNavigate()PLUGINReact Router Form ComponentPLUGINSetting up the Action functionPLUGINAdd form and action to VanLifePLUGINAction function - paramsPLUGINAction function - requestPLUGINGet form data in VanLifePLUGINUse data in action to log inPLUGINBetter (but still fake) authPLUGINChallenge: send user to /host route after log inPLUGINForm replacePLUGINuseActionDataPLUGINAction error handlingPLUGINAction error handling in VanLifePLUGINuseNavigation()PLUGINuseNavigation in VanLifePLUGINget previous route pathnamePLUGINredirectTo - part 1PLUGINredirectTo - part 2PLUGINredirectTo in VanLifePLUGIN

React Router Section 5 Quiz

React Router Section 5 Graded AssignmentЗадание
06Deferred Data19 материалов

Deferred Data

Deferring dataPLUGINPromises and defer()PLUGINdefer getVans()PLUGINAwait componentPLUGINAwait in Vans routePLUGINAwait vans refactorPLUGINReact SuspensePLUGINSuspense in VanLifePLUGINPutting it all together - defer, Await, Suspense in HostVansPLUGINerrorElements in remaining van loading pagesPLUGINPlaceholders are gone! 🎉PLUGINCloud Firestore Setup 🔥PLUGINCloud Firestore Code SetupPLUGINCollection reference and getVans() functionPLUGINCreate getVan() functionPLUGINRefactor getHostVans functionPLUGINFinal loose endsPLUGINOutroPLUGIN

React Router Section 6 Quiz

React Router Section 6 Graded AssignmentЗадание