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

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

苏南大叔:React路由,RouterProvider 如何实现路由的嵌套? - RouterProvider路由嵌套
React路由,RouterProvider 如何实现路由的嵌套?(图4-1)

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

基础测试代码

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

本文中,只不过定义路由的方式,改成了RouterProvider+createBrowserRouter这种方式。

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

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

苏南大叔:React路由,RouterProvider 如何实现路由的嵌套? - 基础源码
React路由,RouterProvider 如何实现路由的嵌套?(图4-2)

Outlet占位符

建立几个最简单的页面,page/S.jspage/N.jspage/O.jspage/N.js。代码类似:

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

苏南大叔:React路由,RouterProvider 如何实现路由的嵌套? - outlet的使用
React路由,RouterProvider 如何实现路由的嵌套?(图4-3)

不管是上述那种情况,对于子element显示的位置,是在上一层的父element里面定义的,使用的方法就是<Outlet/>
换句话说,一个react页面组件中出现的<Outlet/>字样,就是留给路由中定义的对应element的子element的。

有关Outlet的更多信息,可以参考:

RouterProvider路由嵌套

本文设置的是:react路由的第二种写法是:<RouterProvider router={router}></RouterProvider>
参考文章:

实际上就是在createXxxRouter()的参数里面,增加children参数。其内部又是一个数组,再次是pathelement甚至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;

苏南大叔:React路由,RouterProvider 如何实现路由的嵌套? - 第二种路由嵌套方式
React路由,RouterProvider 如何实现路由的嵌套?(图4-4)

题外话

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

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

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

结束语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react