Implementing Breadcrumbs in React using React Router v6

Breadcrumbs are important in the development of webpages as they provide users with a way to keep track of their current location within our webpage and also aid in the navigation of our webpage.

In this guide, we will be implementing breadcrumbs in React using react-router v6 and Bootstrap.

React-router v6 is a routing library used in React and React Native for navigating within a webpage or web app.

Our implementation uses Typescript but it can also easily be used for a Javascript based project.

Setting up

First, let's install react-router-dom in our project if it hasn't already been installed:

npm install react-router-dom

Or alternative, using yarn:

yarn add react-router-dom

Let's also install bootstrap for styling our component:

npm install bootstrap

Implementing our component

We then create a Breadcrumbs.tsx component which will contain the markup for the breadcrumbs and also include the necessary logic to determine the current location relative to the root location.

Let's start by adding a simple markup for the component:

 <div className='text-primary'>
   <nav aria-label='breadcrumb'>
      <ol className='breadcrumb'>
        <li className='breadcrumb-item pointer'>
          <span className='bi bi-arrow-left-short me-1'></span>
            Back
        </li>
      </ol>
   </nav>
</div>

The component currently has just a back button. Let's add a simple implementation for the back button such that when clicked, the previous page should be loaded:

  const goBack = () => {
    window.history.back();
  };

The next step will be to write a function that will use the matchRoutes function to get the current route and apply transformations to filter out all related routes to the current route.
The matchRoute accepts an array of objects of type AgnosticRouteObject and returns an AgnosticRouteMatch<string, T>[] | null where T is the type of object we pass in.
Also important to note is that the object must contain a property named path.

Let's first declare an interface for our route:

interface IRoute {
  name: string;
  path: string; //Important
}

Let's then declare our routes:

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

We also declare a variable to hold the useLocation hook and also another to hold our breadcrumbs in state:

const location = useLocation();
const [crumbs, setCrumbs] = useState<IRoute[]>([]);

Next, let's implement our function:

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

Here, we first get all routes that match the current location:
const allRoutes = matchRoutes(routes, location);

We then do a quick check to see if any result is returned at all and we take the first one:
const matchedRoute = allRoutes ? allRoutes[0] : null;

Next, we filter out all routes that match the current route:
routes.filter((x) => matchedRoute.route.path.includes(x.path))

Then let's use the result to create a new array that checks if the path has params and then swaps out dynamic routes with the params value:

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

This ensures that if we declare a route as /users/:id/edit in the routes and the id is passed as 1, then we get /users/1/edit.

Next, let's call our function in a useEffect so that it runs every time our location changes:

  useEffect(() => {
    getPaths();
  }, [location]);

With this done, we can then use the crumbs in our markup:

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key + 1 ? (
    <li className='breadcrumb-item'>{x.name}</li>
      ) : (
        <li className='breadcrumb-item'>
          <Link to={x.path} className=' text-decoration-none'>
            {x.name}
          </Link>
        </li>
      )
 )}

Here, display all the crumbs with their links except for the last one which only displays the name.

With that, we now have our full BreadCrumbs.tsx component:

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState<IRoute[]>([]);

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    <div className=''>
      <nav aria-label='breadcrumb'>
        <ol className='breadcrumb'>
          <li className='breadcrumb-item pointer' onClick={goBack}>
            <span className='bi bi-arrow-left-short me-1'></span>
            Back
          </li>
          {crumbs.map((x: IRoute, key: number) =>
            crumbs.length === key + 1 ? (
              <li className='breadcrumb-item'>{x.name}</li>
            ) : (
              <li className='breadcrumb-item'>
                <Link to={x.path} className=' text-decoration-none'>
                  {x.name}
                </Link>
              </li>
            )
          )}
        </ol>
      </nav>
    </div>
  );
};
export default Breadcrumbs;

We can then use the component in any part of our application, preferably in the layout.

Conclusion

We have seen how to implement a simple breadcrumbs component which we can add to our app to improve navigation and UX.

Useful links

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/generating-an-automatic-breadcrumb-in-react-router-fed01af1fc3 which this post takes inspiration from.