未根据react-router-dom版本6中的当前路由更新的面包屑

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

const routes = [
  {
    path: '/',
    element: <Home />,
    children: [
      { path: 'about', element: <About /> },
      { path: 'contact', element: <Contact /> },
    ],
  },
];

function App() {
  const element = useRoutes(routes);

  // 获取当前路由信息
  const route = useLocation();

  // 根据当前路由信息生成面包屑导航
  const breadcrumbs = route.pathname.split('/').filter((crumb) => crumb);

  return (
    <div>
      <nav>
        <ul>
          {breadcrumbs.map((crumb, index) => (
            <li key={index}>
              <Link to={`/${breadcrumbs.slice(0, index + 1).join('/')}`}>
                {crumb}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
      {element}
    </div>
  );
}