This lesson covers routing and related concepts using the React Router library.
Lesson Outline
The following items define the scope of the lesson. The lesson outline is flexible; you can improve, expand, and omit items whilst writing lesson content (make sure the pull request description mentions that).
Delve into the rise of client-side routing with SPAs.
Introduce React Router as an excellent solution for React.
Walkthrough how to incorporate React Router in an application, i.e using createBrowserRouter & RouterProvider etc
Explain concepts of protected routes and nested routes with examples
LESSON OUTLINE STILL IN DISCUSSION
Acceptance Criteria
If the requirements here are not met, the work effort is not complete.
[ ] Lesson conforms to the outline above (unless outline has been modified).
We'll use CodeSandbox for interactive examples. To add these examples, follow the instructions in the react-examples repository and create a Pull Request there. When approved, the example will eventually be uploaded to CodeSandbox. In the meantime, leave a placeholder in the lesson file like so:
// some lesson content
**EXAMPLE GOES HERE**
// some lesson content
Lesson: React Router
Section: React Ecosystem
200
Lesson Overview
This lesson covers routing and related concepts using the React Router library.
Lesson Outline
The following items define the scope of the lesson. The lesson outline is flexible; you can improve, expand, and omit items whilst writing lesson content (make sure the pull request description mentions that).
createBrowserRouter
&RouterProvider
etcLESSON OUTLINE STILL IN DISCUSSION
Acceptance Criteria
If the requirements here are not met, the work effort is not complete.
Additional Information
Get The Lesson Template
Download the lesson template using the following command (replace lesson_name with the actual lesson name):
Adding Interactive Examples
We'll use CodeSandbox for interactive examples. To add these examples, follow the instructions in the react-examples repository and create a Pull Request there. When approved, the example will eventually be uploaded to CodeSandbox. In the meantime, leave a placeholder in the lesson file like so: