react router v6实现嵌套路由

做一个简单的笔记

有两种方式可以实现

1. 使用标签 BrowserRouter 结合 useRoutes 来实现
2. 使用标签 BrowserRouter 结合 Route 和 Routes 来实现
3. 使用API createBrowserRouter 来实现

注意：createBrowserRouter是6.4版本才引入的

这是官方文档

注意，这两个是不兼容的

使用标签 BrowserRouter 结合 useRoutes 来实现

创建路由

// src/router/index.tsx

const router = [
    {
        path: "/",
        element: <div>Home</div>,
    },
    {
        path: "/about",
        element: <div>About</div>,
    },
];

export default router;

在APP组件中引用

// src/App.tsx


import "./assets/App.css";
import { Button, Divider, Flex } from "antd";
import { Link, useRoutes } from "react-router-dom";

import router from "~/router";

const App = () => {
    // 使用useRoutes来使用这个路由
    const route = useRoutes(router);
    return (
        <>
            <Flex gap="small" align="flex-start" vertical={false}>
                <Button type="primary">
                    <Link to="/">首页</Link>
                </Button>
                <Button type="primary">
                    <Link to="/about">关于</Link>
                </Button>
            </Flex>
            <Divider orientation="left">正文</Divider>
            <div>{route}</div>
        </>
    );
};

export default App;

需要什么路由，就在这个组件中导入什么路由，然后，就可以切换了，实现嵌套路由

在入口处使用BrowserRouter标签

// src/main.tsx
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import "~/assets/index.css";
import { BrowserRouter } from "react-router-dom";

import App from "~/App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
     </React.StrictMode>,
 );

使用标签 BrowserRouter 结合 Route 和 Routes 来实现

在入口处使用BrowserRouter标签

// src/main.tsx
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import "~/assets/index.css";
import { BrowserRouter } from "react-router-dom";

import App from "~/App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
     </React.StrictMode>,
 );

编写路由

这里就有所变化了，这里将不再单独用文件来表示路由，而是直接在APP组件中编写

相当于APP组件就是这个路由文件

// src/App.tsx
import "./assets/App.css";
import { Button } from "antd";
import { Link, Outlet, Route, Routes } from "react-router-dom";

import Layout from "~/views/layout";

const App = () => {
    return (
        <>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<div>welcome</div>} />
                    <Route path="home" element={<div>home</div>} />
                    <Route
                        path="about"
                        element={
                            <div>
                                about
                                <Button>
                                    <Link to={"/about/team"}>测试</Link>
                                </Button>
                                <br />
                                <Outlet />
                            </div>
                        }
                    >
                        <Route path="team" element={<div>team</div>} />
                    </Route>
                </Route>
            </Routes>
        </>
    );
};

export default App;

这样写最大的优势就是可以嵌套中再嵌套

有些时候咱们就是会有这种需求

就比方说咱们上面这种，在about页面，我还需要加个按钮，用来加载about页面的子页面

这个时候，就可以很清晰的表示结构

使用API createBrowserRouter 来实现

在6.4版本引入了 API createBrowserRouter

这个用起来更加优雅

新建路由

// src/router/index.tsx

import { createBrowserRouter } from "react-router-dom";

import App from "~/App.tsx";

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        // 用嵌套路由的形式
        children: [
            {
                // 设置index，表示这个是默认渲染的子路由
                index: true,
                element: <div>Home</div>,
            },
            {
                path: "about",
                element: <div>About</div>,
            },
        ],
    },
]);

export default router;

修改下入口代码

// src/main.tsx

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import "~/assets/index.css";
import { RouterProvider } from "react-router-dom";

import router from "~/router";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>,
);

APP组件不再放在这个位置，这个位置直接注入新建的路由器就好了

在APP组件中使用 Outlet 标签

Outlet 标签就是用来渲染路由器中对应的子路由的位置

import "./assets/App.css";
import { Button, Divider, Flex } from "antd";
import { Link, Outlet } from "react-router-dom";

const App = () => {
    return (
        <>
            <Flex gap="small" align="flex-start" vertical={false}>
                <Button type="primary">
                    <Link to="">首页</Link>
                </Button>
                <Button type="primary">
                    <Link to="about">关于</Link>
                </Button>
            </Flex>
            <Divider orientation="left">正文</Divider>
            <Outlet />
        </>
    );
};

export default App;

这种会优雅一些，但是，无法在子路由中再加子路由，就有点不好了，所以就这点来说，第二种方式更适合