Project: Multi-page app
- React course
- Intermediate
- Lesson 45/80
- 4 min
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.
Practice App skeleton
Complete the skeleton below. Write an App component; return a <BrowserRouter> containing <Routes> and a <Route path="/" element={"{"<Home />}"} />. Export it.
Starter code
import { BrowserRouter, Routes, Route } from "react-router-dom";
// Write the App component hereSample solution
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How many pages does this project render?
- 1
- 3 Correct answer
- 2
- 4
Explanation: Three pages: home, product list, product detail.
2 Router wrapper
import { BrowserRouter } from "react-router-dom";
function App() {
return <____ />;
}import { BrowserRouter } from "react-router-dom";
function App() {
return <BrowserRouter />;
}Explanation: BrowserRouter wraps the whole app.
3 Project: Multi-page app: match the terms
| Term | Meaning |
|---|---|
BrowserRouter |
App shell |
Routes |
Route list |
Route |
Single path |
path="*" |
404 path |