Project: Multi-page app

Review the goal and steps of the multi-page app project.

Project: Multi-page application

In this project you will build a small three-page app with React Router: home, product list and product detail. Each lesson adds a piece; in the last lesson you wire up the 404 page.

First you set up the layout skeleton: an App wrapped in BrowserRouter, with Routes and Route definitions. Then you add the list, detail and redirect.

When done, you have a multi-page experience instead of a single page; each page has its own URL.

Routes and Route

The Routes component holds the list of routes. Each route is a Route with a path and an element to render.

In React Router v6, Routes picks the best match; it replaces the old Switch. Even if multiple paths match, only one renders.

For 404, the path attribute takes an asterisk; this route fires when no other route matches and renders a 'not found' page.

Exercise App skeleton

Complete the skeleton below. Write an App component; return a <BrowserRouter> containing <Routes> and a <Route path="/" element={"{"<Home />}"} />. Export it.

Show example solution

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Test yourself

How many pages does this project render?
- 1
- 3
- 2
- 4
Show answer

3 — Three pages: home, product list, product detail.

Router wrapper

import { BrowserRouter } from "react-router-dom";

function App() {
  return <____ />;
}

Show answer

import { BrowserRouter } from "react-router-dom";

function App() {
  return <BrowserRouter />;
}

Project: Multi-page app: match the terms

BrowserRouter

App shell
Routes

Route list
Route

Single path
path="*"

404 path

Next lesson: Layout and router

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies