react-router-dom v6：Navigate与Index路由实现默认路由的对比

库版本：react-router-dom v6

我不清楚使用<Navigate/>组件实现默认路由与使用index路由实现同一功能的区别，想了解以下哪种写法更符合React Router的惯用规范？方案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：使用Index路由实现默认视图 #

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

两种实现的核心区别 #

• 方案A（重定向）：访问根路径/时，会通过<Navigate>触发地址栏跳转（replace={true}会替换历史记录，不会留下/的访问记录），最终匹配/clients路由渲染组件。用户能直观看到URL从/变为/clients。
• 方案B（index路由）：根路径/下没有子路径时，直接匹配index规则渲染<Clients/>，URL始终保持/，不会发生跳转动作。

惯用规范推荐 #

React Router官方更推荐方案B的index路由写法，这是因为index路由是官方专门为父路由默认视图设计的语法，完全贴合路由嵌套的设计逻辑，代码意图更清晰，还能减少一次路由跳转的额外开销。

解决方案B的组件重复问题 #

你可以通过抽离路由配置、复用渲染逻辑的方式避免重复，举两个简单的实现方式：

方式1：抽离共享路由配置

// 抽离Clients的路由配置
const clientsRouteConfig = {
  path: 'clients',
  element: <Clients />
};

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      {
        index: true,
        // 复用同一个element
        element: clientsRouteConfig.element
      },
      clientsRouteConfig,
      {
        path: 'contracts',
        element: <Contracts />
      }
    ]
  },
]);

方式2：复用渲染函数

// 定义共享的渲染函数
const renderClients = () => <Clients />;

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

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus