React router6--路由表多级路由嵌套的默认子路由问题

最近小新在写一个基于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。并且此时，路径完全正确！

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