13. Managing Data with React Router

Activity 13.1: A To-Dos App

Solution:

Perform the following steps to complete this activity:

1. Create a new React project via npx create-react-app as explained in Chapter 1, React—What and Why?. Then, install the React Router library by running npm install react-router-dom inside the project folder. Check the package.json file to confirm that you have at least version 6.4 of the react-router-dom package installed.
2. For the three required pages, create three components: a Todos component, a NewTodo component, and a SelectedTodo component. Store these components in files inside the src/routes folder since these components will only be used for routing.
3. For the Todos component, enter the following code:

   // src/routes/Todos.js
   function Todos() {
     const todos = [];
     let content = (
       <main>
         <h1>No todos found</h1>
   ...