How to update Material UI Breadcrumbs dynamically from React Router V6 ?

Implementing breadcrumbs with React Router V6.

Recently I was working on Shoe Store website where I wanted to apply breadcrumbs according to the current route. I found many solutions but they were not working on latest React Router V6 because those solutions were belonged to old versions.

Here I am going to tell you, how to bind dynamic breadcrumbs with latest React Router V6. I will start from very beginning and show you what are the scenarios that I am going to cover in this article.

Scenarios:

Case 01:

Case 01 : for simple routes

Case 02:

Case 02: for nested routes

Solution:

Installation Guide:
Material UI:

https://material-ui.com/getting-started/installation/

React Router V6:

via npm:

npm install history react-router-dom@next
or
npm install history react-router-dom@6

via yarn:

yarn add history react-router-native@next
or
yarn add history react-router-native@6

Case 01:

We have to import some necessary elements and hooks in the component.

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Link from '@material-ui/core/Link';
import { useLocation, useNavigate } from 'react-router-dom';

Write this code in the component export method.

export default function AppBreadcrumbs() {
  let navigate = useNavigate();
  let location = useLocation();
  let currentRoutes = []
  currentRoutes = location.pathname !== '/' ?           location.pathname.split('/') : [];
  if (currentRoutes.length > 0)
  currentRoutes.shift();
}

In React Router V6, useNavigate() hook is used to redirect to specific route and useLocation() hook is used to get the location information about the route. I created an array to store the routes name from Url by using location.pathname. It gives a string with “/” or multiple forward slashes when route is nested. I splitted the string into an array of routes that are present in Url.

For localhost:3000/products, it gives an array of two elements: first element is empty string and second element with string “products”.
We don’t need an empty value in array that’s why we’ll delete this first array value by JavaScript built in Array.Shift() function. It will only give “/” in string when we visit Home page.

Now we will use currentRoutes array to bind the simple breadcrumbs in below code.

if (currentRoutes.length > 0) {
currentRoutes.shift();
return (
<Breadcrumbs aria-label="breadcrumb" style={{ marginBottom: 15 }}>
<Link color="inherit" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
Home
</Link>
{
currentRoutes.length === 1
? <Typography color="textPrimary">{currentRoutes[0]}</Typography>
: <></>
}
</Breadcrumbs>
)
}
else
return <></>

This code will work only when we have single “/” route like case 01.
currentRoutes[0] will bind “products” route into breadcrumb. In order to nested routes into the breadcrumbs we will update only else section inside the <Breadcrumbs> tag.

Result:

Output simple breadcrumbs

Click on Home link will call the navigate(‘/’) function to render the Home Component.

Case 02:

In Case 02, all code will be same we will just update the else part inside the <Breadcrumbs> element and replace the “<></>” with currentRoutes.map function.

if (currentRoutes.length > 0) {
currentRoutes.shift();
return (
<Breadcrumbs aria-label="breadcrumb" style={{ marginBottom: 15 }}>
<Link color="inherit" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
Home
</Link>
{
currentRoutes.length === 1
? <Typography color="textPrimary">{currentRoutes[0]}</Typography>
: currentRoutes.map((route, index) => {
return (index !== currentRoutes.length - 1
? <Link key={index} color="inherit" style={{ cursor: 'pointer' }} onClick={() => {
navigate(route)
}} >
{route}
</Link>
: <Typography key={index} color="textPrimary">{route}</Typography>)
})
}
</Breadcrumbs>
);
}
else
  return <></>

In the return statement, we will check for last ending route to do not display as link because we don’t want to click on the same page link. When we have last route or current route where we stand, it will simply bind Typography.

All nested routes will be bind through map function with route variable and navigate function will also receive this route variable to call the specific route on click.

Here is the result of nested routes in breadcrumbs.

Result:

Output nested breadcrumbs.