如何比较React路由器和到达路由器

介绍

Reach Router 由 Ryan Florence 创作。如果你认出他的名字，那是因为他是 React Router 的原始合著者，这是目前最流行的路由库。

这两个库似乎具有相同的目的，即为 Web 提供路由层。然而，Reach Router 采用了一种全新的解决方案，它还内置了可访问性 (a11y) 和开箱即用的功能。

警告：自最初发布以来，已经宣布React Router将采用Reach Router的许多特性。您应该参考“我今天应该选择哪个项目？” 部分满足您的项目需求。

在本文中，您将比较 React Router 和 Reach Router，以便更好地了解每个库支持和提供的内容。

先决条件

要学习本教程，您需要：

对 React 有一定的了解。你可以阅读我们的如何在 React.js 系列中编码。
熟悉 React Router 约定。你可以阅读我们的 React 路由器概述。

比较设置

Reach Router 与 React Router 非常相似，并使用类似的命名空间，如 <Router>、<Link> 等，但有一些值得注意的区别。让我们考虑一下 react-router 和 reach-router 的基本设置。

首先，使用 React Router 进行设置：

React Routerimport React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
        <h1>Global Party Supplies, Inc</h1>                          //  PATHS
        <Route component={Home}       path="/"            exact/>    //  "/"
        <Route component={About}      path="/about"/>                //  "/about"
        <Route component={Support}    path="/support"/>              //  "/support"
        <Route component={Dashboard}  path="/dashboard"/>            //  "/dashboard"
        <Route component={Invoices}   path="/dashboard/invoices"/>   //  "/dashboard/invoices"
        <Route component={Team}       path="/dashboard/team"/>       //  "/dashboard/team"
        <Route component={Report}     path="/dashboard/:reportId"/>  //  "/dashboard/:reportId"
      </div>
    </Router>
  );
}

React Router 有自己的 <Route> 组件，它采用两个 props：component 和 path。

这是使用到达路由器的相同设置：

Reach Routerimport React from "react";
import { Router } from "@reach/router";

const App = () => {
  return (
    <div>
      <h1>Global Party Supplies, Inc</h1>
      <Router>                           //  PATHS
        <Home path="/"/>                 //  "/"
        <About path="about"/>            //  "/about"
        <Support path="support"/>        //  "/support"
        <Dashboard path="dashboard">     //  "/dashboard"
          <Report path=":reportId"/>     //  "/dashboard/:reportId"
          <Invoices path="invoices"/>    //  "/dashboard/invoices"
          <Team path="team"/>            //  "/dashboard/team"
        </Dashboard>
      </Router>
    </div>
  );
}

第一印象是这看起来真的很干净。到达路由器没有 <Route> 组件。您只需使用组件本身（例如，<Dashboard>）！使用嵌套 JSX 作为子路径 (/dashboard/team) 与 React Router 不同。

但是等等……这里有一些奇怪的东西。乍一看，您可能认为 <Report> 路由会拦截 /dashboard/invoices 和 /dashboard/team，但实际上并非如此！

Reach Router 使用点系统通过查看 path 值对您的路线定义进行排名。当两条路径似乎发生冲突时，参数 (:reportId) 和通配符 (*) 获得低优先级，而显式路径 (invoices 和 teams) 获得更高的优先级。这意味着导航到 /dashboard/invoices 确实有效，并且 /dashboard/example 转到 <Report>。

比较参数和道具

现在我们已经探索了基本设置，让我们探索如何将数据传递给路由。

首先，使用 React Router 的 reportId 和 salesData：

React Router<Route
  path="/dashboard/:reportId"
  render={(props) => {
    return <Report {...props} salesData={true} />
  }}
/>

const Report = ({ props, match }) => {
  return (
    <h1>
      {match.params.reportId}  // "match" is from react-router
      and
      {props.salesData}
    </h1>
  )
}

React Router 涉及的东西更多，但如果你已经使用它一段时间，这是正常的费用。

这是到达路由器的相同示例：

Reach Router<Report
  path="dashboard/:reportId"  // static routes work too :)
  salesData={this.state.salesData}
/>

const Report = (props) => {
  return (
    <h1>
      {props.reportId}
      and
      {props.salesData}
    </h1>
  )
}

请注意 reportId 如何不需要 match 来访问 URL 参数。

接下来，让我们研究一下 <Link>ing 在这两个库中是如何工作的。

比较链接

Reach Router 和 React Router 都导出了一个 <Link> 组件，但是有一些区别。让我们考虑一个有几个子页面的 <Dashboard> 组件。

首先，使用 React 路由器：

React Routerimport { Link } from "react-router-dom";

const Dashboard = ({ match, history }) => {
  return (
    <div>
      <div>
        <Link to={`${match.url}/invoices`}>Invoices</Link>
        <Link to={`${match.url}/team`}>Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <a onClick={history.goBack}>Go Back</a>
      </div>
    </div>
  );
}

使用 React Router，你必须指定 <Link>，这通常意味着当你有超出根子路径的子路径（例如，/host/path1/path2）时，你必须使用 match.url。另外，请注意您必须以编程方式 goBack 因为没有用于相对导航的实用程序。

这是到达路由器的相同示例：

Reach Routerimport { Link } from "@reach/router";

const Dashboard = () => {
  return (
    <div>
      <div>
        <Link to="invoices">Invoices</Link>
        <Link to="team">Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <Link to="../">Go Back</Link>
      </div>
    </div>
  )
}

到达路由器支持相对链接！它还完全支持像 <a> 标签那样的 Unix 目录导航。

结论

在本文中，您将 React Router 与 Reach Router 进行了比较，以便更好地了解每个库支持和提供的内容。

基于这些比较，Reach Router 是 React Router 的一个非常诱人的替代品。总体而言，在读写代码时，它在传达信息方面更加优雅。这不应该让人感到意外，因为 Ryan Florence 是 react-router 的合著者，大多数艰难的见解只能通过时间和经验获得。

试试 Reach 路由器吧！第一个 v1.0 版本是在 2018 年 5 月发布的，GatsbyJS v2 已经选择了 Reach Router 而不是 React Router。