如何在React Router v6中配置路由以正确展示布局（createBrowserRouter场景）

你可以通过两种方式实现需求：

方式一：使用 Index 路由 #

将首页内容设为根路由的index 路由，这样访问根路径 / 时，Outlet 会自动渲染首页组件，其他子路由也能正常替换 Outlet 内容。

示例配置代码：

import { createBrowserRouter, Outlet } from 'react-router-dom';

// 根布局组件（包含顶部导航栏）
const RootLayout = () => (
  <>
    <header>顶部导航栏</header>
    <Outlet /> {/* 用于渲染子路由内容 */}
  </>
);

// 首页组件
const Home = () => <div>首页内容</div>;

// 其他页面组件
const OtherPages = () => <div>其他页面内容</div>;

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { index: true, element: <Home /> }, // 访问/时自动渲染Home
      { path: 'otherpages', element: <OtherPages /> },
    ],
  },
]);

方式二：配置根路径重定向 #

在原有路由结构基础上，给根路径添加重定向规则，访问 / 时自动跳转到 /home，同时确保 /home 是根路由的子路由，继承根布局的导航栏。

示例配置代码：

import { createBrowserRouter, Outlet, Navigate } from 'react-router-dom';

const RootLayout = () => (
  <>
    <header>顶部导航栏</header>
    <Outlet />
  </>
);

const Home = () => <div>首页内容</div>;
const OtherPages = () => <div>其他页面内容</div>;

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '', element: <Navigate to="/home" replace /> }, // 重定向到/home
      { path: 'home', element: <Home /> },
      { path: 'otherpages', element: <OtherPages /> },
    ],
  },
]);

两种方式都能满足需求：访问 / 时显示导航栏+首页内容，切换到 /otherpages 时，Outlet 会替换为其他页面内容。

内容的提问来源于stack exchange，提问作者samadfullstack