react-router-dome v6如何监听路由

在React Router v6中，可以使用`useRoutes`和`useLocation`钩子来监听路由。

`useRoutes`钩子可以用来匹配路由，并返回匹配到的路由组件。在这个过程中，你可以使用`onMatch`属性来监听路由的匹配过程。例如：

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

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

const App = () => {
  const match = useRoutes(routes, { onMatch: () => console.log('Route matched') });

  return match;
};

另外，你也可以使用`useLocation`钩子来监听路由的变化。例如：

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

const App = () => {
  const location = useLocation();

  useEffect(() => {
    console.log('Route changed', location.pathname);
  }, [location]);

  return (
    // ...
  );
};

在这个例子中，我们使用了`useEffect`钩子来监听`location`对象的变化，然后在控制台上输出路由的路径名。