我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：React路由，定义路由的两种方式，RouterProvider和Routes - RouterProvider
React路由，定义路由的两种方式，RouterProvider和Routes（图3-1）

苏南大叔的“程序如此灵动”，记录苏南大叔的编程心得体会。本文测试环境：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>这种方式，在前面的很多文章里面，都已经写过。参考文章：

参考的简单例子：

import { Routes, Route, Link, useParams } from "react-router-dom";
JavaScript
<Routes>
  <Route path="book:p1" element={<Book p3="组件传参" />} />
  <Route path="book:p1/:p2" element={<Book p3="组件传参" />} />
</Routes>
JavaScript

这里不做详细描述，主要就是明白理解jsx的组件语法，就可以比较容易的理解上面几篇文章里面的例子了。值得注意的是：<Routes></Routes>的外围的某一层，必定包裹着<BrowserRouter>或<HashRouter>。

BrowserRouter

import { BrowserRouter } from "react-router-dom";
JavaScript
<BrowserRouter>
  ...
  <Routes>
    <Route .../>
  </Routes>
  ...
</BrowserRouter>
JavaScript

HashRouter

import { HashRouter } from "react-router-dom";
JavaScript
<HashRouter>
  ...
  <Routes>
    <Route .../>
  </Routes>
  ...
</HashRouter>
JavaScript

RouterProvider + createRouter()

还是以create-react-app的cra模版为例子，进行修改。

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

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>
);
JavaScript

page/Index.js：

import { Link } from "react-router-dom";
function IndexPage() {
  return (
    <div>
        <Link to="/list/nodejs">NodeJs文章列表</Link>
    </div>
  );
}
export default IndexPage;
JavaScript

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;
JavaScript

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;
JavaScript

其实本文的重点就是这个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;
JavaScript

苏南大叔：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;
JavaScript

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

苏南大叔：React路由，定义路由的两种方式，RouterProvider和Routes - hashRouter
React路由，定义路由的两种方式，RouterProvider和Routes（图3-3）

题外话

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

结束语

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

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

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

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

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