如何创建react-router v4面包屑？

import { BrowserRouter, Route, Link } from 'react-router-dom';

const routes = [
  { path: '/', component: Home, breadcrumbName: 'Home' },
  { path: '/about', component: About, breadcrumbName: 'About' },
  { path: '/contact', component: Contact, breadcrumbName: 'Contact' },
];

const Breadcrumbs = ({ routes }) => (
  <Route
    path="*"
    render={({ location }) => {
      const pathnames = location.pathname.split('/').filter((x) => x);

      return (
        <div>
          {pathnames.length > 0 && (
            <ul>
              {pathnames.map((pathname, index) => {
                const url = `/${pathnames.slice(0, index + 1).join('/')}`;
                const route = routes.find((r) => r.path === url);

                return (
                  <li key={url}>
                    <Link to={url}>{route.breadcrumbName}</Link>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      );
    }}
  />
);

const App = () => (
  <BrowserRouter>
    <div>
      <Breadcrumbs routes={routes} />
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </BrowserRouter>
);

ReactDOM.render(<App />, document.getElementById('root'));