Bug in breadcrumb.js for catch-all routes in react router

[yampan]

Hi,

I encounter an error when I have a catch-all route in app.js

Code: Select all

<Routes>
	// some valid routes....
	<Route path="*" element={<ErrorPage />} />
 </Routes>

The app crashed because of this line in breadcrumb.js

Code: Select all

const label = props.meta.label; // TypeError: undefined is not an object (evaluating 'props.meta.label')

My temp workaround

Code: Select all

    const label = props?.meta?.label;
    return label 
        ? <>{location.pathname === '/' ? <span>Current Working</span> : <span>{label}</span>}</> 
        : <span>No page found</span>

Kindly update in the next version. Thanks!

p/s: diamond is a beautiful piece of work. Keep it up!

[habubey]

Hey there!
Thank you so much for your nice compliments. We will continue to improve.
About your problem we'll check and get back to you immediately.

[ulasturan]

Hi yampan,
Your workaround is seems correct.

Code: Select all

import React from 'react';
import { useLocation } from 'react-router-dom';

const AppBreadcrumb = (props) => {
    const location = useLocation();
    const label = props.meta.label ? props.meta.label : 'No page found';
    return <>{location.pathname === '/' ? <span>Dashboard</span> : <span>{label}</span>}</>;
};

export default AppBreadcrumb;

You can try this code block below until the release,