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
。
基础测试代码
本文是基于下面这篇文章进行改造的,内容上以及效果上基本相同。参考文章:
本文中,只不过定义路由的方式,改成了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
的更多信息,可以参考:
RouterProvider路由嵌套
本文设置的是:react
路由的第二种写法是:<RouterProvider router={router}></RouterProvider>
。
参考文章:
实际上就是在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
相关经验文章,请参考下面的链接:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。