Hello and welcome! This is the starter code for each scrim in Bob Ziroll's Learn React Router 6 course on Scrimba! ⚛️
To follow the course on Scrimba's interactive code-learning platform, head to the Learn React Router 6 page on Scrimba!
This README file is the best "single source of truth" for you to see updates made to the course if you're coming from the freeCodeCamp YouTube channel!
As time passes, dependencies can sometimes become outdated or start exhibiting bugs that weren't there when I first recorded the course.
In the version of this course on Scrimba, it's easy for me to add quick updates and new lessons. However, the course on YouTube is frozen in time and unchangeable. So please come check the "Updates" section below often, as you may find there are important updates that can help you avoid common bugs.
Check out this video for a walkthrough of the steps to get your project set up on your own machine.
- Clone this repo to your own machine
cd
to the main folder in Terminal- Run
npm install
- (Optional, but preferred) Open just the section folder you're currently working on (e.g. 01 - Introduction to React Router) in your editor
cd
into the section folder, then into the specific lesson folder you're currently on.- Run
npm run dev
to spin up the dev server - Copy/paste or click on the localhost URL it provides to see the project at the starting point of the lesson
- Open the relevant files from the lesson and follow along.
To kill the dev server, hit ctrl + c.
I'll post any updates you need to be aware about in this section.
React Router is the most popular routing library for React applications and one of the most downloaded React support libraries ever.
In this course, you'll learn:
- What are SPAs?
- Basic router setup
- Route
- Link
- Route parameters
- Nested routes and Outlet
- Layout and Index routes
- Relative paths
- NavLink
- Outlet context
- Search parameters
- Link state
- 404 page / Splat routes
- Loaders
- Actions
- Form & form data
- defer()
- Await
- Suspense
- Error handling & errorElement
- useRouteError
- useNavigate
- useNavigation
- useLocation
- useLoaderData
- useActionData
- Protected Routes
- Deploying with Netlify