likes
comments
collection
share

ReactRouterDom-v5&v6用法与异同

作者站长头像
站长
· 阅读数 14

本文作者系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的哈希部分会被添加到应用的根路径之后，例如：**example.com/#/about**。这…
  • 总结：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的行为。

其他参数

  1. 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>
  );
}
  1. 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>
  );
}
  1. 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>
  );
}
  1. 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>
  );
}

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

引用