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

react-route的世界里面,存在着两套定义路由的方式。一种是<Routes>+<Route>这种方式,另外一种是<RouterProvider router={router}></RouterProvider>这种方式。本文着重于第二种表述方式,其中的router可能是createBrowserRouter()的结果,也可能是createHashRouter()的结果,这里并不特别限定。

苏南大叔:React路由,定义路由的两种方式,RouterProvider和Routes - RouterProvider
React路由,定义路由的两种方式,RouterProvider和Routes(图3-1)

苏南大叔的“程序如此灵动”,记录苏南大叔的编程心得体会。本文测试环境:nodejs@20.18.0create-react-app@5.0.1react-router-dom@6.27.0react@18.3.1。使用RouterProvider的话,就必然搭配createBrowserRouter()或者createHashRouter(),同时也必然不会在本层级搭配<Routes>+<Route>

Router + Routes + Route

<Routes>+<Route>这种方式,在前面的很多文章里面,都已经写过。参考文章:

参考的简单例子:

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-appcra模版为例子,进行修改。

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;

苏南大叔:React路由,定义路由的两种方式,RouterProvider和Routes - browserRouter
React路由,定义路由的两种方式,RouterProvider和Routes(图3-2)

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;

同样的参数,就是函数名改了一下。

苏南大叔:React路由,定义路由的两种方式,RouterProvider和Routes - hashRouter
React路由,定义路由的两种方式,RouterProvider和Routes(图3-3)

题外话

如果不考虑浏览器的版本兼容性的话,目前来说,使用BrowserRouter是更加推荐的,效果更好。但是,如果要向下兼容的话,还是使用HashRouter是更好的选择。苏南大叔看来的话,目前似乎没有太大的必要使用HashRouter

结束语

苏南大叔的更多react的经验文章,可以参考:

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

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

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

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