react-router刚开始的配置（类组件版）如下:

<Routes>
  <Route path="/" element={<Navigate to="/home" />} />
  <Route path="/home" element={<Home />}>
    <Route path="/home" element={<Navigate to="/home/recommend" />} />
    <Route path="/home/recommend" element={<HomeRecommend />} />
    <Route path="/home/ranking" element={<HomeRanking />} />
    <Route path="/home/songMenu" element={<HomeSongMenu />} />
  </Route>
  <Route path="/about" element={<About />} />
  <Route path="/category" element={<Category />} />
  <Route path="/login" element={<Login />} />
  <Route path="/detail/:id" element={ <Detail /> } />
  <Route path="/user" element={ <User /> } />
  <Route path="*" element={<NotFound />} />
</Routes>

这样会大大增加页面的复杂程度，原本一个页面只需要写html和js就行的，路由把他单独提取到一个文件就行了，类似于vue。 react-router v6版本提供了一个函数——useRoutes，这个函数可以将我们写的配置转换成上面那种形式，这里的配置是一个数组对象

const routes = [
  {
    path: '/',
    element: <Navigate to={<Home />} />
  },
  {
    path: '/home',
    element: <Home />,
      children: [
      {
        path: 'recommend',
        element: <HomeRecommend />
        },
        {
        path: 'ranking',
        element: <HomeRanking />
        },
        {
        path: 'songMenu',
        element: <HomeSongMenu />
        }
        ]
        },
        {
        path: '/about',
        element: <Navigate to={<About />} />
        },
        {
        path: '/category',
        element: <Navigate to={<Category />} />
        },
        {
        path: '/login',
        element: <Navigate to={<Login />} />
        },
        {
        path: '/detail/:id',
        element: <Navigate to={<Detail />} />
        },
        {
        path: '/user',
        element: <Navigate to={<User />} />
        },
        {
        path: '*',
        element: <Navigate to={<NotFound />} />
        },
        ]