ReactルーターとReachルーターを比較する方法

序章

リーチルーターはRyanFlorenceによって作成されました。彼の名前を知っているのは、彼が現在最も人気のあるルーティングライブラリである ReactRouterの最初の共著者だからです。

どちらのライブラリも、Webにルーティングレイヤーを提供するという同じ目的を持っているようです。ただし、Reach Routerはソリューションに新しいアプローチを採用しており、アクセシビリティ（a11y）が組み込まれており、すぐに使用できます。

警告：最初の発行以来、ReactRouterがReachRouterの多くの機能を採用することが発表されました。「今日はどのプロジェクトを選ぶべきですか？」を参照してください。プロジェクトのニーズに対応するセクション。

この記事では、各ライブラリがサポートおよび提供するものをよりよく理解するために、ReactルーターとReachルーターを比較します。

前提条件

このチュートリアルに従うには、次のものが必要です。

Reactにある程度精通している。 React.jsシリーズのコーディング方法を読むことができます。
Reactルーターの規則に精通していること。 Reactルーターの概要を読むことができます。

セットアップの比較

ReachRouterはReactRouterと非常によく似ており、<Router>、<Link>などの同様の名前空間を使用しますが、いくつかの注目すべき違いがあります。 react-routerとreach-routerの両方の基本的なセットアップを考えてみましょう。

まず、ReactRouterを使用したセットアップ：

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には、componentとpathの2つの小道具を使用する独自の<Route>コンポーネントがあります。

ReachRouterを使用した同じセットアップは次のとおりです。

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

第一印象は、これは本当にきれいに見えるということです。 ReachRouterには<Route>コンポーネントがありません。コンポーネント自体を使用するだけです（たとえば、<Dashboard>）。サブパス（/dashboard/team）にネストされたJSXを使用すると、Reactルーターとは区別されます。

しかし、待ってください…ここに何か奇妙なことがあります。一見すると、<Report>ルートは/dashboard/invoicesと/dashboard/teamをインターセプトすると思うかもしれませんが、実際にはインターセプトしません。

Reach Routerは、ポイントシステムを使用して、path値を調べてルート定義をランク付けします。 2つのパスが衝突しているように見える場合、パラメータ（:reportId）とワイルドカード（*）の優先度は低くなりますが、明示的なパス（invoicesとteams）の優先度は低くなります。優先度が高い。これは、/dashboard/invoicesへの移動が実際に機能し、/dashboard/exampleが<Report>に移動することを意味します。

パラメータと小道具の比較

基本的な設定について説明したので、次に、データをルートに渡す方法について説明します。

まず、reportIdとsalesDataとReactルーター：

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にはさらに多くのものが関係していますが、これを長期間使用している場合、これは通常の料金です。

ReachRouterの同じ例を次に示します。

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がURLパラメーターにアクセスするためにmatchを必要としないことに注意してください。

次に、両方のライブラリで<Link>がどのように機能するかを調べてみましょう。

リンクの比較

ReachRouterとReactRouterはどちらも<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>を指定する必要があります。つまり、ルートサブパス以外のサブパスがある場合は通常match.urlを使用する必要があります（例：/host/path1/path2）。また、相対ナビゲーション用のユーティリティがないため、プログラムでgoBackする必要があることに注意してください。

ReachRouterの同じ例を次に示します。

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

Reach Routerは相対リンクをサポートしています！また、<a>タグのようにUnixディレクトリナビゲーションを完全にサポートします。

結論

この記事では、各ライブラリがサポートおよび提供するものをよりよく理解するために、ReactルーターとReachルーターを比較しました。

これらの比較に基づくと、ReachRouterはReactRouterの非常に魅力的な代替手段です。全体として、コードを読み書きするときに情報を伝達する方がエレガントです。 RyanFlorenceはreact-routerの共著者であり、ほとんどの苦労した洞察は時間と経験を通してのみ得ることができるので、これは驚くべきことではありません。

リーチルーターを試してみてください！最初のv1.0リリースは2018年5月で、 GatsbyJSv2はすでにReactRouterに対してReachRouterを選択しています。