Friendly Names in Breadcrumbs with react-router

Question

My react app uses react-router-dom (v5.1.2). I added a breadcrumb to my UI that parses the router location to provide links back to higher UI levels.

The Breadcrumb component looks like this (omitted some of the boilerplate for react/material-ui):

...
import { Route, Link as RouterLink } from 'react-router-dom';

const BreadcrumbBar = () => {
    return (
        <Box m={2}>
            <Route>
                {({ location }) => {
                    const pathnames = location.pathname.split('/').filter(x => x);
                    return (
                        <Breadcrumbs>
                            {pathnames.map((value, index) => {
                                const last = index === pathnames.length - 1;
                                const to = `/${pathnames.slice(0, index + 1).join('/')}`;

                                return last
                                    ? (
                                        <Typography key={to}>
                                            {value}
                                        </Typography>
                                    ) : (
                                        <Link component={RouterLink} to={to} key={to}>
                                            {value}
                                        </Link>
                                    );
                            })}
                        </Breadcrumbs>
                    );
                }}
            </Route>
        </Box>
    );
};
...

It works great, but the path components in the router location aren't exactly friendly. For example, to ensure routes are unique, if a path refers to a record from a database, I use the record id in the path, as the other fields that may be more friendly are not guaranteed to be unique.

So a typical router url might look like:

/home/users/5ecf40ed29f0e13e93e00d2a/name/dog

Which makes the breadcrumb look like:

home / users / 5ecf40ed29f0e13e93e00d2a / name / dog

What I'd really like to do is keep the path urls as they are, but present the user's name in the breadcrumb, and maybe even localized names for the path components. Ideally, ending up with a breadcrumb that's more friendly like this:

Home / Users / Bob Smith / Name / Pet

Since react-router doesn't use a central route table (which has its merits), I don't see an easy way to do this cleanly. Ideally, any place where I specify to='<path>' I could a friendly name name='Bob Smith'? and the router's location would hold this metadata for use in creating a breadcrumb.

I can see a number of ways to do this, but I'm hoping I'm just being dense and missing the obvious technique that the creators intended before I plunge in and do something different.

Any suggestions?