12. Multipage Apps with React Router

Activity 12.1: Creating a Basic Three-Page Website

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 & Why?. Then, install the React Router library by running npm install react-router-dom inside the project folder.
2. For the three required pages, create three components: a Welcome component, a Products component, and a ProductDetail component. Store these components in files inside the src/routes folder since these components will only be used for routing.

For the Welcome component, enter the following code:

// src/routes/Welcome.js
function Welcome() {
  return (
    <main>
      <h1>Welcome to our shop!</h1>
      <p>
        Please explore our products or share...