DEV Community

The Ecstatic Engineer
The Ecstatic Engineer

Posted on • Originally published at bayo99.hashnode.dev

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

The next step will be to write a function that will use the matchRoutes function from react-router to get the current route and apply transformations to filter out all related routes to the current route.
The matchRoute function 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
}
Enter fullscreen mode Exit fullscreen mode

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'
  }
];
Enter fullscreen mode Exit fullscreen mode

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[]>([]);
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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,
        }));
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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>
      )
 )}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)