ReactRouterDom-v5v6用法与异同

本文作者系360奇舞团前端开发工程师

简介：

React Router Dom是React.js中用于实现路由功能的常用库。在React应用中，路由可以帮助我们管理页面之间的导航和状态，并实现动态加载组件。本文将深入探讨React Router Dom的两个主要版本：V5和V6，并介绍它们的用法和异同点。

v5用法

React Router Dom的V5版本是在React Router的基础上构建的。它是一个稳定且广泛使用的版本，为React应用提供了强大的路由功能。以下是V5版本的用法示例：

安装React Router Dom：

npm install react-router-dom@5
yarn add react-router-dom@5

导入所需组件：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

在应用中定义路由：

<Router>
  <nav>
    <ul>
      <li>
        <Link to="/">首页</Link>
      </li>
      <li>
        <Link to="/about">关于</Link>
      </li>
    </ul>
  </nav>

  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  </Router>

在组件中使用路由参数：

import { useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();
  return <h2>用户ID: {id}</h2>;
}

V5版本的React Router Dom提供了许多强大的功能，如嵌套路由、路由参数、重定向等。但在V6版本中，它们的用法可能有所不同。

v6用法

React Router Dom的V6版本是一个全新的重写版本，旨在提供更简洁和直观的API。以下是V6版本的用法示例：

安装React Router Dom V6：

npm install react-router-dom@next
yarn add react-router-dom@next

导入所需组件：

import { BrowserRouter as Router, Route, Link, Routes, Outlet } from 'react-router-dom';

在应用中定义路由：

<Router>
  <nav>
    <ul>
      <li>
        <Link to="/">首页</Link>
      </li>
      <li>
        <Link to="/about">关于</Link>
      </li>
    </ul>
  </nav>

  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

在组件中使用路由参数：

import { useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();
  return <h2>用户ID: {id}</h2>;
}

V6版本的React Router Dom引入了一些新的概念，如 Routes 和 Outlet。Routes 用于定义路由集合，而 Outlet 用于在父路由组件

BrowserRouter 与HashRouter

BrowserRouter 和 HashRouter 是 React Router Dom 中两种常用的路由器组件，它们用于在React应用中处理路由。

BrowserRouter：

BrowserRouter使用HTML5的 History API 来实现路由功能。它通过使用history.pushState()和history.replaceState()方法来修改浏览器的URL，而不会引起页面的重新加载。BrowserRouter使用基于浏览器的URL路径来匹配和渲染对应的组件。使用BrowserRouter时，需要将所有的路由规则放置在服务端的路由配置上，以确保在刷新或直接访问某个URL时能够正确加载对应的组件。

HashRouter：

HashRouter使用URL的哈希部分（#）来实现路由功能。它在URL中添加了一个哈希路由器，并通过监听window对象的hashchange事件来响应URL的变化。当URL的哈希部分发生改变时，HashRouter会匹配对应的路由规则并渲染相应的组件。相对于BrowserRouter，HashRouter具有更广泛的兼容性，因为哈希部分的变化不会触发浏览器向服务器发起请求，而是在客户端进行处理。这对于一些需要部署在静态服务器上的应用程序非常有用。

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

需要注意的是，在使用HashRouter时，URL的哈希部分会被添加到应用的根路径之后，例如：http://example.com/#/about。这种方式可以让应用正确地响应URL的变化并显示对应的组件。
总结：BrowserRouter和HashRouter是React Router Dom中两种常用的路由器组件。BrowserRouter使用HTML5的History API实现路由功能，而HashRouter使用URL的哈希部分实现路由功能。选择使用哪种路由器取决于应用的部署环境和兼容性需求。如果应用部署在一个支持HTML5 History API的服务器上，可以使用BrowserRouter；如果需要更广泛的兼容性，或者应用是一个纯静态网站，可以使用HashRouter。

Router中的重要配置

BrowserRouter与homepage

在React应用的package.json文件中，可以通过设置"homepage"参数来指定应用的基本URL路径。这个基本URL路径会影响React Router中使用的路由匹配规则和导航链接的生成。当设置了"homepage"参数后，React Router的路由匹配规则和导航链接会考虑到该基本URL路径。它们会自动添加基本URL路径作为前缀，以确保路由的正确匹配和导航链接的生成。例如，假设"homepage"参数设置为"/my-app"，以下是使用React Router时的一些示例：

BrowserRouter：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} /> {/* 匹配的路径为：/my-app/ */}
      <Route path="/about" component={About} /> {/* 匹配的路径为：/my-app/about */}
    </Router>
  );
}

在BrowserRouter中，设置了"homepage"参数后，路由匹配规则中的路径会自动添加基本URL路径作为前缀。

Link组件：

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">首页</Link> {/* 生成的链接为：/my-app/ */}
        </li>
        <li>
          <Link to="/about">关于</Link> {/* 生成的链接为：/my-app/about */}
        </li>
      </ul>
    </nav>
  );
}

在Link组件中，设置了"homepage"参数后，生成的导航链接会自动添加基本URL路径作为前缀。
总结：设置package.json中的"homepage"参数可以指定React应用的基本URL路径。这个基本URL路径会影响React Router中的路由匹配规则和导航链接的生成，确保它们考虑到基本URL路径作为前缀。这在部署React应用到不同的路径下时非常有用，可以保证路由的正确匹配和导航链接的生成。

HashRouter与homepage

在React Router中，HashRouter不受package.json中的"homepage"参数的影响。设置"homepage"参数只会影响BrowserRouter的行为，不会直接影响HashRouter。 HashRouter使用URL的哈希部分（#）来实现路由功能，不依赖于基本URL路径。无论是否设置了"homepage"参数，HashRouter始终使用相对于根目录的哈希部分来匹配路由规则和生成导航链接。例如，假设"homepage"参数设置为"/my-app"，以下是使用HashRouter时的示例：

import { HashRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} /> {/* 匹配的路径为：/#/ */}
      <Route path="/about" component={About} /> {/* 匹配的路径为：/#/about */}
    </Router>
  );
}

在HashRouter中，无论"homepage"参数设置为什么，路由的匹配规则和生成的导航链接仍然会使用/#/和/#/about这样的哈希部分路径。

总结： HashRouter不受package.json中的"homepage"参数的影响。无论是否设置了"homepage"参数，HashRouter始终使用相对于根目录的哈希部分来匹配路由规则和生成导航链接。"homepage"参数只会影响BrowserRouter的行为。

其他参数

basename：可以通过在Router组件中设置basename属性来使用basename参数，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router basename="/my-app">
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

path：在Route组件中使用path属性来定义路由规则的路径，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

exact：通过设置exact属性为true，确保只有当URL路径与path参数完全匹配时才进行渲染，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </Router>
  );
}

strict：设置strict属性为true，以在末尾带有斜杠的URL路径上进行匹配，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route strict path="/" component={Home} />
      <Route strict path="/about/" component={About} />
    </Router>
  );
}

以上示例展示了如何使用这些参数来影响路径的生成和匹配。根据具体需求，可以在相应的组件中设置这些参数来实现所需的路由配置。

引用

https://reactrouter.com/en/main/router-components/browser-router
https://www.npmjs.com/package/react-router-dom

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。