While Create React App doesn’t include page routing out-of-the-box, React Router is the most popular solution for handling routing in React applications.
Adding React Router to Your Project
To incorporate React Router into your application, execute the following command in your terminal from the root directory of your project:
npm install -D react-router-dom
Note: This tutorial uses React Router v6. If you’re upgrading from v5, use the @latest flag:
npm install -D react-router-dom@latest
Folder Structure
To create a multi-page application, we’ll organize our files as follows. In the src
directory, create a pages
folder with the following files:
src/pages/
:- Layout.js
- Home.js
- Articles.js
- ContactMe.js
- NotFound.js
Each of these files will contain a basic React component.
Basic Usage
Next, we’ll use our Router in the index.js
file.
Use React Router to navigate to different pages based on the URL:
import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Layout from "./pages/Layout"; import Home from "./pages/Home"; import Articles from "./pages/Articles"; import ContactMe from "./pages/ContactMe"; import NotFound from "./pages/NotFound"; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="articles" element={<Articles />} /> <Route path="contact-me" element={<ContactMe />} /> <Route path="*" element={<NotFound />} /> </Route> </Routes> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
Example Explanation
First, we wrap our content with <BrowserRouter>
. Then, we define our <Routes>
. An application can have multiple <Routes>
components, but our basic example uses just one.
<Route>
elements can be nested. The first <Route>
has a path of /
and renders the Layout
component. The nested <Route>
elements inherit and extend the parent route. For instance, the articles
path becomes /articles
.
The Home
component’s route has no path but includes an index
attribute, designating it as the default route for the parent path, which is /
. Setting the path to *
acts as a catch-all for undefined URLs, which is useful for a 404 error page.
Pages / Components
The Layout
component includes <Outlet>
and <Link>
elements.
The <Outlet>
renders the matched child route, while <Link>
is used to set the URL and maintain browsing history.
For internal navigation, we use <Link>
instead of <a href="">
.
The “layout route” is a shared component that displays common content across all pages, like a navigation menu.
Layout.js:
import { Outlet, Link } from "react-router-dom"; const Layout = () => { return ( <> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/articles">Articles</Link> </li> <li> <Link to="/contact-me">Contact Me</Link> </li> </ul> </nav> <Outlet /> </> ); }; export default Layout;
Home.js:
const Home = () => { return <h1>Home</h1>; }; export default Home;
Articles.js:
const Articles = () => { return <h1>Articles</h1>; }; export default Articles;
ContactMe.js:
const ContactMe = () => { return <h1>Contact Me</h1>; }; export default ContactMe;
NotFound.js:
const NotFound = () => { return <h1>404 - Page Not Found</h1>; }; export default NotFound;