路由器接路由器_路由器之战：到达路由器vsReact路由器-CSDN博客

路由器接路由器

In this article, get an overview of Reach Router along with code snippets from React Router to see how both libraries stack up against each other.

在本文中，您将获得Reach Router的概述以及React Router的代码片段，以了解两个库之间如何相互堆叠。

Reach Router is authored by Ryan Florence. If you recognize his name it’s because he’s the original co-author of React Router, which currently the most popular routing library with 33.5K stars on GitHub. Far as I can tell, both libraries have identical purposes to provide a routing layer for the web… But what is definitely obvious is that Reach Router is taking a fresh approach to the solution, and it also comes with accessibility (a11y) baked-in and working out of the box.

到达路由器由Ryan Florence撰写。如果您知道他的名字，那是因为他是React Router的原始合著者， React Router是当前最受欢迎的路由库，在GitHub上有33.5K个星。据我所知，这两个库都具有为Web提供路由层的相同目的……但是，显而易见的是， Reach Router正在采用一种全新的解决方案，并且还附带了可访问性(a11y)开箱即用。

基本设置 (The Basic Setup)

Reach Router is very similar to React Router and uses similar namespaces like <Router>, <Link>, etc., but there’s some noteworthy differences. Let’s look at basic setups for both reach-router and react-router.

到达路由器与React路由器非常相似，并使用类似的名称空间，例如<Router> ， <Link>等，但是有一些值得注意的区别。让我们看一下reach-router和react-router基本设置。

First, a setup using Reach Router:

首先，使用“到达路由器”进行设置：

//
//Reach-Router
//

import 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>
  );
}

My first impression is that this looks really clean. Using nested JSX for subpaths (/dashboard/team) distinguishes itself from React Router. But wait… there’s something weird here. At first glance you may think the <Report> route would intercept /dashboard/invoices and /dashboard/team, but it actually doesn’t! Reach Router uses a point system to rank your route definitions by looking at the path value. When two paths seem to collide, params (:reportId) and wildcard (*) get low-priority, while explicit paths (invoices and teams) get higher priority. This means navigating to /dashboard/invoices actually works, and /dashboard/foo goes to <Report>.

我的第一印象是，这看起来真的很干净。使用嵌套的JSX作为子路径( /dashboard/team )使其与React Router有所不同。但是等等……这里有些奇怪。乍一看，您可能会认为<Report>路由会拦截/dashboard/invoices和/dashboard/team ，但实际上不会！到达路由器使用点系统通过查看path值对您的路由定义进行排名。当两条路径似乎冲突时，params( :reportId )和通配符( * )的优先级较低，而显式路径( invoices和teams )的优先级较高。这意味着导航到/dashboard/invoices实际上可行，而/dashboard/foo转到<Report> 。

Let’s now look at React Router:

现在让我们看一下React Router：

//
//React-Router
//

import 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 has its own <Route> component that takes two props: component and path. Whereas Reach Router doesn’t have a <Route> component… You just use the component itself (eg., <Dashboard>)!

React Router有自己的<Route>组件，它有两个道具： component和path 。而Reach Router没有<Route>组件……您只需使用组件本身(例如<Dashboard> )！

参数和道具 (Params & Props)

Now that we’ve seen the basic setup, let’s see how you’d pass data to routes.

现在，我们已经了解了基本设置，让我们看看如何将数据传递到路由。

Using Reach Router:

使用到达路由器：

//
//Reach-Router
//

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

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

That’s it?? It’s almost too concise… And now with React Router:

而已？？简直太简单了……现在有了React Router：

//
//React-Router
//

// Route definition
<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>
  )
}

Ah, yes… Now I remember how it looked like. There’s more stuff involved with React Router, but this is normal fare if you’ve been using it for any amount of time. Let’s take a look at how <Link>ing works in both libraries.

嗯，是的。。。现在我还记得它的样子。 React Router涉及更多的东西，但是如果您已经使用了一段时间，这是正常的票价。让我们看一下两个库中<Link>工作方式。

连结中 (Linking)

Both Reach Router and React Router export a <Link> component, but there’s some differences. Let’s take a look at our <Dashboard> component, which has several subpages:

Reach Router和React Router都导出<Link>组件，但是有一些区别。让我们看一下我们的<Dashboard>组件，它具有几个子页面：

//
//Reach-Router
//

import { 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>
  )
}

Whoa! Relative links! It also fully sports Unix directory navigation like <a> tags would.

哇！相对链接！它也像<a>标签一样完全支持Unix目录导航。

And now with React Router:

现在使用React Router：

//
//React-Router
//

import { 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>
  );
}

With React Router you have to be more specific with <Link> which usually means you’ll have to use match.url when you have subpaths beyond a root subpath (eg., /host/somethingFoo/👉somethingBar👈). All of this is intelligently handled by Reach Router under the hood. Also, note that you have to programmatically “go back” since there isn’t a utility for relative navigation.

使用React Router，您必须更具体地使用<Link> ，这通常意味着当您拥有根子路径之外的子路径时(例如/host/somethingFoo/👉somethingBar👈 )，必须使用match.url 。所有这些都由引擎盖下的Reach Router智能处理。另外，请注意，由于没有用于相对导航的实用程序，因此您必须以编程方式“返回”。

结论 (Conclusion)

Based on these comparisons, Reach Router is a very tempting alternative to React Router. Overall, it’s more elegant as regards to form (the way it looks), and function (you write less, and actually do more!). This shouldn’t come as a surprise as Ryan Florence is the co-author of react-router, and most hard-fought insights can only be gotten through time & experience. It seems to show with reach-router.

基于这些比较，到达路由器是React路由器的非常诱人的替代品。总体而言，它在形式 (外观)和功能 (编写更少，实际上做得更多！)方面更为优雅。 Ryan Florence是react-router的合著者，这不足为奇，而且大多数艰苦的见解只能通过时间和经验来获得。似乎与reach-router一起显示。

Try giving Reach Router a try! The first v1.0 release was one year ago (May 2018), and GatsbyJS v2 has already opted for Reach Router against React Router (announcement).

尝试尝试到达路由器！第一个v1.0版本是在一年前(2018年5月)，并且GatsbyJS v2已经选择了Reach Router对抗React Router( 公告 )。

学到更多 (Learn More)

Video Tour: Ryan Florence does a video tour of Reach Router
视频游览：Ryan Florence对“到达路由器”进行了视频游览
Official Docs: The docs are high-quality, and include lots of interactive CodeSandbox demos
官方文档：这些文档是高质量的，并且包含许多交互式CodeSandbox演示