最近小新在写一个基于React Hooks+Mobx+axios+react-router-dom v6+antD的前端项目，在进行二级路由配置时遇到了一些问题。

path：" / " 时，渲染组件<Layout />；

path：" / " 时，重定向到Layout的子组件Home，路径为 " /home "。

这个需求看上去非常简单，如果使用Vue的路由表来写的话：

const routes = [
  {
    
    
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
    
     path: "/home", component: Home }
    ]
  }
]

是不是觉得非常简单，其实用React来写，如果不使用路由表（不使用useRoutes这个Hook）的话，也是非常简单。

<Routes>
  <Route path="/" element={
    
    <Layout />}>
	<Route index element={
    
    <Home/ >}></Route>
  </Route>
</Routes>

使用index默认路由，直接渲染<Home />组件。但是这个情况下，Home组件的路径就不是/home了。

于是我就想着使用useRoutes，用路由表来统一管理路由，但是这个时候问题出现了。

const element = useRoutes([
  {
    
    
    path: "/login",
    element: <Login />
  },
  // 需要鉴权的组件Layout
  {
    
    
    path: "/",
    element: <AuthRoute>
      <Layout />
      <Navigate to="home" replace />
    </AuthRoute>,
    children: [
      {
    
    
        path: "home",
        element: <AuthRoute>
          <Home />
        </AuthRoute>
      },
      {
    
    
        path: "article",
        element: <AuthRoute>
          <Article />
        </AuthRoute>
      },
      {
    
    
        path: "publish",
        element: <AuthRoute>
          <Publish />
        </AuthRoute>
      }
    ]
  }
])

上面代码中的<AuthRoute>为提供鉴权的HOC高阶组件，忽略这个就好了。

可以看到，我是在<Layout />组件后面直接使用了<Navigate to="home" replace />，我的思路觉得，react-router-dom v6路由表的使用与Vue路由表的使用一样，于是我就在组件后面直接重定向了。

打开界面一看效果，嘿～还真行，我可真是个天才。

但是再一看，当点击其他的子路由，比如这个例子中的article和publish时，他会渲染对应的子路由，但是！又会立马重定向到home路径，渲染Home组件。

而且这个时候电脑不断地卡顿，发烫，风扇也一直在离心运动……

事实告诉我，这个方法不行。

随着我的不断探索，终于发现了正确的方法：

{
    
    
    path: "/login",
    element: <Login />
  },
  // 需要鉴权的组件Layout
  {
    
    
    path: "/",
    element: <AuthRoute>
      <Layout />
    </AuthRoute>,
    children: [
      {
    
    
        path: "home",
        element: <AuthRoute>
          <Home />
        </AuthRoute>
      },
      {
    
    
        path: "article",
        element: <AuthRoute>
          <Article />
        </AuthRoute>
      },
      {
    
    
        path: "publish",
        element: <AuthRoute>
          <Publish />
        </AuthRoute>
      },
      // 这里
      {
    
    
        path: "",
        element: <Navigate to="home" replace />
      }
    ]
  }

也就是，在children这个属性上，再定义一组子路由规则，但是path中什么都不写，然后再到element这个属性中重定向。如此一来，当进入 "/"路径时，他会先渲染出<Layout />组件，然后再去重定向，渲染出子组件Home。并且此时，路径完全正确！

那么，这样就解决了多级路由嵌套下的默认子路由问题！