嵌套路由的概念

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作

二级路由，例如：

嵌套路由配置

实现步骤

1. 使用 children属性配置路由嵌套关系
2. 使用 <Outlet/> 组件配置二级路由渲染位置

路由嵌套关系配置
在父级页面中增加 children 属性，值为一个路由列表，与原始的路由配置一样。

import { createBrowserRouter } from "react-router-dom";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";

// 1. 创建 router 实例对象，并配置路由对应关系
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/board",
        element: <Board />,
      },
    ],
  },
]);

export default router;

二级路由渲染位置配置
在 Layout 组件中，通过 <Outlet/> 配置二级路由渲染位置

import { Outlet } from "react-router-dom";
const Layout = () => {
  return (
    <div>
      我是 Layout{" "}
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export default Layout;

二级路由样式（超级简单，可以忽略）

// About/index.js
const About = () => {
  return <div>我是 About</div>;
};

export default About;

// Boad/index.js
const Board = () => {
  return <div>我是 Board</div>;
};

export default Board;

效果

http://localhost:3000/board

http://localhost:3000/about

React默认二级路由设置

场景：当访问的是一级路由时，默认的二级路由组件可以得到渲染。例如访问/，默认渲染 board。

方案：
只需要在二级路由的位置去掉 path，设置 index 属性为 true

示例配置：
<Board /> 组件的 index 值为 true ，path 属性去掉了。

import { createBrowserRouter } from "react-router-dom";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";

// 1. 创建 router 实例对象，并配置路由对应关系
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/about",
        element: <About />,
      },
      {
        index: true,
        element: <Board />,
      },
    ],
  },
]);

export default router;

访问 / 路径的效果如下：

React404路由配置

场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染

实现步骤：

1. 准备一个 NotFound 组件
2. 在路由表数组的末尾，以 * 号作为路由 path 配置路由

NotFound 组件代码
NotFound/index.js

const NotFound = () => {
  return <div>我是 NotFound</div>;
};

export default NotFound;

路由配置 router/index.js

import { createBrowserRouter } from "react-router-dom";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
import NotFound from "../page/NotFound";

// 1. 创建 router 实例对象，并配置路由对应关系
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/about",
        element: <About />,
      },
      {
        index: true,
        element: <Board />,
      },
    ],
  },
  {
    path: "*",
    element: <NotFound />,
  },
]);

export default router;

访问一个不存在的页面效果
http://localhost:3000/aaa