React路由，RouterProvider 如何实现路由的嵌套？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述一下react route这个话题里面的路由嵌套，因为react路由实际上有两大类的写法。那么，路由嵌套这个话题也将分为多个文章来完成。本文着眼于RouterProvider+createRouter()这种写法进行阐述。

苏南大叔的“程序如此灵动”，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

基础测试代码

本文是基于下面这篇文章进行改造的，内容上以及效果上基本相同。参考文章：

• https://newsn.net/say/react-router-routes.html

本文中，只不过定义路由的方式，改成了<RouterProvider />+createBrowserRouter()这种方式。

还是使用标准的cra模版，进行改造。

create-react-app test
cd test
npm i react-router-dom --save

Outlet占位符

建立几个最简单的页面，page/S.js、page/N.js、page/O.js、page/N.js。代码类似：

import { Outlet } from "react-router-dom";
const Sn = () => {
    return <div> 
        # 第一层S
        <Outlet/>
    </div>
}
export default Sn

不管是上述那种情况，对于子element显示的位置，是在上一层的父element里面定义的，使用的方法就是<Outlet/>。

换句话说，一个react页面组件中出现的<Outlet/>字样，就是留给路由中定义的对应element的子element的。

有关Outlet的更多信息，可以参考：

• https://newsn.net/say/react-router-params.html

RouterProvider路由嵌套

本文使用react路由的第二种写法是：<RouterProvider router={router}></RouterProvider>。参考文章：

• https://newsn.net/say/react-router-provider.html

实际上就是在createXxxRouter()的参数里面，增加children参数。其内部又是一个数组，再次是path和element甚至children的多个组合。

改成RouteProvider的版本后，App.js:

import {
  RouterProvider,
  createBrowserRouter,
} from "react-router-dom";
import S1 from "./page/S";
import N2 from "./page/N";
import O2 from "./page/O";
import K3 from "./page/K";
import { Outlet,Link } from "react-router-dom";

const Base = () => {
    return <div> 
        <Link to="/s">第一层S</Link>__
        <Link to="/s/n">第二层N</Link>__
        <Link to="/s/o">第二层O</Link>__
        <Link to="/s/o/k">第三层K</Link>
        <Outlet/>
    </div>
}
const router = createBrowserRouter([
  {
    path:"/",
    element:<Base></Base>,
    children:[{
      path: "s",
      element: <S1></S1>,
      children: [
        {
          path: "n",
          element: <N2></N2>,
        },
        {
          path: "o",
          element: <O2></O2>,
          children: [
            {
              path: "k",
              element: <K3></K3>,
            },
          ],
        },
      ],
    }],
  },
]);

function App() {
  return (
    <div className="App">
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}
export default App;

题外话

如果使用routes+route这种方式定义路由的话，在公共部分使用Link是很容易的事情。而在RouterProvider这种方式中，在公共区域使用Link似乎有些逻辑上的不舒服。参考上面代码中的Base定义。

所以，对于routes+route来说，在公共部分使用Link是一件非常自然的事情。因为外部毕竟包裹着个BrowserRouter标签。而RouterProvider的话，如果想在公共部分使用Link，就必须使用个嵌套的写法。这似乎有些令人费解。

不知道各位读者有好的见解么？欢迎留言。

结束语

苏南大叔觉得这种react route决定组件位置的方式，很难以接受。另外，RouterProvider这种方式，也不是很好用。吐槽完毕。苏南大叔的更多react相关经验文章，请参考下面的链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。