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

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

path：" / " 时，渲染组件；

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

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

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      { path: "/home", component: Home }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10

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

<Routes>
  <Route path="/" element={<Layout />}>
	<Route index element={<Home/ >}></Route>
  </Route>
</Routes>
1
2
3
4
5

使用index默认路由，直接渲染组件。但是这个情况下，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>
      }
    ]
  }
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

可以看到，我是在组件后面直接使用了，我的思路觉得，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 />
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

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