React Router 6 Basics

React Router is still the most popular routing library for React. This blog post will explore React Router 6, including how to bootstrap React Router 6, create layouts using the new <Outlet> component, and pass arguments to routes.

Click the image below to watch the YouTube video version of this blog post:

React Router history

React Router has become a popular choice for managing routing in React applications and is widely used in both small and large applications. It is also highly customizable, allowing developers to create custom routing logic and integrate it into their applications. Currently, the library is maintained by the team behind Remix, a React-based framework for building web applications.

With React Router, you can define routes and their corresponding components using a declarative syntax. When the user navigates to a particular URL, React Router will render the corresponding component for that URL. React Router also provides features such as nested routes, route parameters, and query parameters. One of the biggest advantages of React Router is that it works with any Reaac application, regardless of the framework or library that is used.

Setting up React Router

React Router is a JavaScript library, so you can use a package manager such as npm or Yarn. Assuming you already have a React project set up, you can follow these steps to install React Router using npm:

Open your terminal and navigate to your React project directory. Run the following command to install React Router:

npm install react-router-dom

This will install React Router and its dependencies.

Once the installation is complete, you can use React Router in your application. To get started, you can import the necessary methods and components from React Router as you'll learn in the next step.

Creating routes

To create routes in React Router, you can use the createBrowserRouter method with the RouterProvider component. With createBrowserRouter you define the available routes and their corresponding component. You can use the path prop to define the URL path for the route, and the element prop to define the component that should be rendered when the user navigates to the route.

The following example shows how to create a route for the /about URL path:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

function About() {
  return <h1>About</h1>;
}

const router = createBrowserRouter([
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return (
    <RouterProvider value={router}>
      {/* Your components */}
    </RouterProvider>
  );
}

When the user navigates to the /about URL path, React Router will render the About component. But how would you handle nested routes? For example, what if you want to share the same layout for multiple routes? In the next section, you'll learn how to create nested routes and layouts using the <Outlet /> component.

Use <Outlet /> to create children routes

With React Router 6, you can define nested routes using the children field in the route object. This allows you to create layouts that can be shared across multiple routes.

Let's say you want to create a layout that contains a header and a footer. You can use the element prop to define the layout component and the children field to define the nested routes. The following example shows how to create a layout that contains a header and a footer:

import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';

function About() {
  return <h1>About</h1>;
}

function Layout() {
  return (
    <div>
      <header>
        <h1>Layout</h1>
      </header>
      <Outlet />
      <footer>Copyright 2023</footer>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

You can use the <Outlet /> component to render nested routes. This allows you to create layouts that can be shared across multiple routes, reducing the amount of duplicated code in your application.

React Router 6 parameters

React Router 6 allows you to pass parameters to routes. This will enable you to create dynamic routes that can be used to render different components based on the parameters that are passed to the route.

To pass parameters to a route, you can add the params to the path field in the route object. The following example shows how to pass a userId parameter to the /user/:userId route:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'user/:userId',
        element: <User />,
      },
    ],
  },
]);

And the following example shows how to retrieve the userId parameter with the useParams hook in the User component:

import { useParams } from 'react-router-dom';

function User() {
  const { userId } = useParams();

  return <h1>User {userId}</h1>;
}

You can use the useParams hook to retrieve the parameters that are passed to the route. The useParams hook returns an object with the parameters that are passed to the route.

Keep learning

In this blog post, you learned how to bootstrap React Router 6, create layouts using the new <Outlet> component, and pass parameters to routes. If you want to learn more about React Router 6, you can check out the official documentation. Also, keep an eye out for my YouTube channel, where I'll post more videos about React and React Router 6.

> Subscribe to my YouTube channel

Or find me on X or Bluesky. I'd love to hear from you!