React Router

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

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

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 />);

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;

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;

const Home = () => {

  return <h1>Home</h1>;

};

​

export default Home;

Articles.js:

const Articles = () => {
  return <h1>Articles</h1>;
};

export default Articles;

const Articles = () => {

  return <h1>Articles</h1>;

};

​

export default Articles;

ContactMe.js:

const ContactMe = () => {
  return <h1>Contact Me</h1>;
};

export default ContactMe;

const ContactMe = () => {

  return <h1>Contact Me</h1>;

};

​

export default ContactMe;

NotFound.js:

const NotFound = () => {
  return <h1>404 - Page Not Found</h1>;
};

export default NotFound;

const NotFound = () => {

  return <h1>404 - Page Not Found</h1>;

};

​

export default NotFound;