How To Use React Router

Hello, If you read my article about "How To Use React Router v6" you will notice that I've explained most of the things you need to know about React Router.

But in this article, I'm going to explain by giving some examples about how to use React Router in your applications. In this tutorial, we are going to use React Router v6.

Note: If you are upgrading from v5, you will need to use the @latest flag by running the code sample below in your terminal:

npm i -D react-router-dom@latest

If you're just adding up React Router in your application for the first time, run this in the terminal from the root directory of the application:

npm i -D react-router-dom

You might be thinking, why do we need React Router in our application as a beginner?

Create React App doesn't include page routing, that's why React Router is the most popular solution.

This is how you should structure your folder when routing:

Let's create a folder named pages with several files within the src folder:

src\pages\

• Layout.js

• Home.js

• Blogs.js

• Contact.js

• NoPage.js

Now, each file will contain a very basic React component.

Let us now use our Router in our App.js file.

React Router is used to route to pages based on URL:

App.js

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

Now let us explain the code sample above:

We wrap our content first with <BrowserRouter>.

Then we define our <Routes>. An application can have multiple <Routes>. Our basic example only uses one.

<Route>s can be nested. The first <Route> has a path of / and renders the Layout component.

The nested <Route>s inherit and add to the parent route. So the blogs path is combined with the parent and becomes /blogs.

The Home component route does not have a path but has an index attribute. That specifies this route as the default route for the parent route, which is /.

Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.

Lastly, let give some sample look of the pages or components:

The Layout component has <Outlet> and <Link> elements.

The <Outlet> renders the current route selected.

<Link> is used to set the URL and keep track of browsing history.

Anytime we link to an internal path, we will use <Link> instead of <a href="">.

The "layout route" is a shared component that inserts common content on all pages, such as a navigation menu.

Here are some code samples of each component / page:

Layout.js

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  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>

      <Outlet />
    </>
  )
};

export default Layout;

Home.js

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

export default Home;

Blogs.js

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

export default Blogs;

Contact.js

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

export default Contact;

NoPage.js

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

export default NoPage;