React路由,定义路由的两种方式,RouterProvider和Routes
发布于 作者:苏南大叔 来源:程序如此灵动~在react-route
的世界里面,存在着两套定义路由的方式。一种是<Routes>
+<Route>
这种方式,另外一种是<RouterProvider router={router}></RouterProvider>
这种方式。本文着重于第二种表述方式,其中的router
可能是createBrowserRouter()
的结果,也可能是createHashRouter()
的结果,这里并不特别限定。
苏南大叔的“程序如此灵动”,记录苏南大叔的编程心得体会。本文测试环境:nodejs@20.18.0
,create-react-app@5.0.1
,react-router-dom@6.27.0
,react@18.3.1
。使用RouterProvider
的话,就必然搭配createBrowserRouter()
或者createHashRouter()
,同时也必然不会在本层级搭配<Routes>
+<Route>
。
Router + Routes + Route
<Routes>
+<Route>
这种方式,在前面的很多文章里面,都已经写过。参考文章:
- https://newsn.net/say/react-link.html
- https://newsn.net/say/react-router.html
- https://newsn.net/say/react-router-params.html
参考的简单例子:
import { Routes, Route, Link, useParams } from "react-router-dom";
<Routes>
<Route path="book:p1" element={<Book p3="组件传参" />} />
<Route path="book:p1/:p2" element={<Book p3="组件传参" />} />
</Routes>
这里不做详细描述,主要就是明白理解jsx
的组件语法,就可以比较容易的理解上面几篇文章里面的例子了。值得注意的是:<Routes></Routes>
的外围的某一层,必定包裹着<BrowserRouter>
或<HashRouter>
。
BrowserRouter
import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
...
<Routes>
<Route .../>
</Routes>
...
</BrowserRouter>
HashRouter
import { HashRouter } from "react-router-dom";
<HashRouter>
...
<Routes>
<Route .../>
</Routes>
...
</HashRouter>
RouterProvider + createRouter()
还是以create-react-app
的cra
模版为例子,进行修改。
create-react-app test
cd test
npm i react-router-dom --save
index.js
:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
page/Index.js
:
import { Link } from "react-router-dom";
function IndexPage() {
return (
<div>
<Link to="/list/nodejs">NodeJs文章列表</Link>
</div>
);
}
export default IndexPage;
page/List.js
:
import { Link,useParams } from "react-router-dom";
function ListPage() {
const params = useParams();
const name = params.name;
return (
<div>
{name}列表页,<Link to="/">回到首页</Link>
</div>
);
}
export default ListPage;
App.js
:
import { RouterProvider } from 'react-router-dom'
import router from './Router';
function App() {
return (
<div className="App">
<h2>公共文字</h2>
<RouterProvider router={router}></RouterProvider>
</div>
);
}
export default App;
其实本文的重点就是这个Router.js
文件,使用createBrowserRouter()
[推荐]或者createHashRouter()
来创建路由。
createBrowserRouter()【推荐】
由于众所周知的原因,react
路由,最好选择BrowserRouter
。
Router.js
:
import { createBrowserRouter } from 'react-router-dom'
import ListPage from './page/List';
import IndexPage from './page/Index';
const router = createBrowserRouter([
{
path:"/list/:name", // useParams方式
element:<ListPage></ListPage>
},
{
path:"/", // 普通或者useSearchParams
element:<IndexPage></IndexPage>,
},
])
export default router;
createHashRouter()
Router.js
:
import { createHashRouter } from 'react-router-dom'
import ListPage from './page/List';
import IndexPage from './page/Index';
const router = createHashRouter([
{
path:"/List/:name",
element:<ListPage></ListPage>
},
{
path:"/",
element:<IndexPage></IndexPage>,
},
])
export default router;
同样的参数,就是函数名改了一下。
题外话
如果不考虑浏览器的版本兼容性的话,目前来说,使用BrowserRouter
是更加推荐的,效果更好。但是,如果要向下兼容的话,还是使用HashRouter
是更好的选择。苏南大叔看来的话,目前似乎没有太大的必要使用HashRouter
。
结束语
苏南大叔的更多react
的经验文章,可以参考:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。