Exercise: React and Routing

Open the React Router tutorial: React Router Tutorial for reference. If you are using version 7, use this instead.

1. Create a new project with Vite and clean up in the usual way before you continue.
2. Install npm install react-router-dom@6.28.0 or version 7

We are going to create a book viewing app.

1. Create a navigation bar with links to:

   • Books (showing a list of books)
   • Add a book (With a form to add a new book)
   • Find a book (With an input field to write an id number to show a book)
2. Add appropriate routes with components for each link.
3. Use the BookFacade from here for methods to use on the book list.

4. Implement the Books component to show a list of all the books.

   • Make each book a clickable link.

5. Add a Details component that can show details about a book when the book is clicked on in the list of books.

6. Implement the AddBook component with a form that can add another book to the list.

7. Implement the FindBook component with a single input field to enter a book id and a button to load book data below the input field.

8. Add a NoMatch component and add a route to let it handle “unknown” routes.

9. Change the book links to be NavLinks as in here.