带导航的默认页面与带索引路由的默认页面

Question

图书馆版本：

react-router-dom v6

我不太清楚使用

<Navigate/>

元素实现默认路由与使用索引路由来实现相同目的之间的区别。以下哪一个更地道？

对

B

中的 <Clients/> 组件的重复调用让我有点困扰，但如果我们希望使用的默认路径与实际路径一致（通常情况下），我没有找到解决方法案例）。

A.使用 Navigate 实现默认视图

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to='/clients' replace={true} />,
    errorElement: <ErrorPage/>,
  },
  {
    path: '/',
    element: <RootLayout/>,
    children: [
      {
        path: 'clients',
        element: <Clients/>
      },
      {
        path: 'contracts',
        element: <Contracts/>
      }
    ]
  },
]);

B.使用索引路由来实现默认视图

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout/>,
    children: [
      {
        index: true,
        element: <Clients/>
      },
      {
        path: 'clients',
        element: <Clients/>
      },
      {
        path: 'contracts',
        element: <Contracts/>
      }
    ]
  },
]);

Answer 1

我想说指定/重定向到默认页面的惯用方法是选项 C，即重定向到默认路由的索引路由。

示例：

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="clients" replace />
      },
      {
        path: 'clients',
        element: <Clients />
      },
      {
        path: 'contracts',
        element: <Contracts />
      }
    ]
  },
]);

选项A是不正确的，因为它为同一个"/"路径渲染了

两个

路由，而选项B是W.E.T.，因为它声明了渲染相同组件的两条路由（老实说，这不是世界上最糟糕的事情，因为RRD是“智能”足以在渲染这些组件的路径之间导航时保持安装这些组件的实例）。

布局路线也不需要显式路径，因此以下内容也可以工作：

export const router = createBrowserRouter([
  {
    element: <RootLayout />,
    children: [
      {
        path: '/', // or `index: true,` but not both
        element: <Navigate to="clients" replace />
      },
      {
        path: 'clients',
        element: <Clients />
      },
      {
        path: 'contracts',
        element: <Contracts />
      }
    ]
  },
]);

根

RootLayout

布局路由简单地包装了嵌套路由，根/主页

"/"

呈现到默认页面的重定向。