In this article, we're going to discuss how to make a multi page website (or app) in React. This is a relatively simple concept, and can be done in about five minutes. Once you understand how to do it, you'll be able to continually add pages to your projects with ease.

We're going to use React Router V6, which was recently released, and contained some breaking changes from version five. Other tutorials using V5 will not work and are outdated.

Having an app or a website with multiple pages coded in React is important for user experience. Take a look at any popular react application like Twitter Lite or Facebook... You'll notice that there are many collections of pages that users access on a daily basis.

There are a collection of methods that you can employ to add multiple pages in React, but you should first understand that this isn't something that's built into the native library. Instead, we're going to need to use a purpose built package to fulfill the goal of creating multiple pages.

The use cases for having multiple pages in a single React app are pretty simple. You can create a website, and easily classify different types of content on different pages.

But, it should also be understood that the default implementation of React is made to use a single HTML file, and this is by design. React users components, which are dynamically added to this single HTML file.

Multiple Pages in React

As mentioned before, there are many different ways to add multiple pages in React. Let's take a look at a couple of the packages that you can install to fulfill this task.

Now that we understand the various ways that we can implement pages in React, let's take a look at the most popular and simple way to do this.

Using React Router

React Router is the de facto standard library for routing with react. Once set up, you'll be able to navigate between multiple components within react, synchronized to changing URL paths. It will also work with the HTML5 history API, keeping everything in sync and allowing you to use the forward/backward arrows in the browser.

For this tutorial we are going to assume that you have created a React application and have multiple components that you want to navigate between.

React Router is good for removing the white flash that occurs when navigating between files, and making things quickly change, while allowing for the user to still go back and forward using the History API.

Note, this is a simple example. It's also still client-side rendering, which is not good for SEO. If you're trying to make a "real" website, check out NextJS or Gatsby.

1. Add React Router

npm install react-router-dom

This will install the react-router-dom package to your application which is necessary to implement a dynamic routing for the individual pages, synchronize the URLs, and access the history API.

2. Build Your Pages

We're going to make a collection of pages, in the /src/pages directory. In this example, we have a Homepage, 404 page, blog and contact page to navigate between.

In this example, the home, contact and blog page follow the same general structure:

import React from 'react'; function Home() { return ( <h1>this is the homepage</h1> ); } export default Home;

NoPage is also the same, but is designed as a 404 error page.

We'll come back to "layout.jsx" in step 4.

3. Make The Navbar

Now that we understand the structure of the pages, let's make a navbar to jump between each. We suggest making an individual navbar component as it's easy to edit in the future. Some other tutorials lump the Nav into the layout.jsx file, which is also fine.

Here's what navbar.jsx looks like:

import React from "react"; import { BrowserRouter, Route, Link } from "react-router-dom"; function Navbar() { return ( <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blogs">Blogs</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> ); } export default Navbar;

The <link/> element is the same as an <a href=> in HTML.

4. Bring Everything Together With Layout.jsx

Now, we'll tie the page content (think of it as the main) and the navigation between each page together.

Here's what that file looks like:

import React from "react"; import {Outlet} from "react-router-dom"; import Navbar from "../Navbar"; const Layout = () => { return ( <> <Navbar /> <Outlet /> </> ); }; export default Layout;

The <Outlet/> element spits out the component routed to in step 5.

5. Create Routes

In our index.js, we'll create the actual routing.

import ReactDOM from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Layout from "./pages/Layout"; import Home from "./pages/Home"; import Blogs from "./pages/Blogs"; import Contact from "./pages/Contact"; import NoPage from "./pages/NoPage"; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="blogs" element={<Blogs />} /> <Route path="contact" element={<Contact />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); } ReactDOM.render(<App />, document.getElementById("root"));

This is the actual way we route between each component, or page. The structure is important here: by default, we'll render the Layout template, which in turn outputs the pages within. <Route index element={<Home />} />, By setting the index route, the naked domain will load the Home template.

These routes will show the blog page when the url is /blog and contact page when the url is /contact. Add as many pages and routes as needed.

This final route is a catchall, if no other page exists. It's good for a 404.

Conclusion

We hope that this tutorial was helpful and showing you how to easily implement pages in React. This tutorial is using React Route v6, which was recently released - please know that many other tutorials will use outdated and unsupported elements such as switch. Remember, this won't be friendly for search engines, but if you're looking for a way for your users to access the history API, navigate between pages and see the URL change, and generally have more website like features for your application, this is a great route for you.

Contents hide

1 Multiple Pages in React

2 Using React Router

2.1 1. Add React Router

2.2 2. Build Your Pages

2.3 3. Make The Navbar

3 4. Bring Everything Together With Layout.jsx

4 5. Create Routes

5 Conclusion