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

投稿日: 2022-04-20 2022-10-22
タグ: React

序章

リーチルーターは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 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ルーターには独自の <Route> 2つの小道具を取るコンポーネント： component と path.

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

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

第一印象は、これは本当にきれいに見えるということです。リーチルーターには <Route> 成分。コンポーネント自体を使用するだけです（例： <Dashboard>)! サブパスにネストされたJSXを使用する（/dashboard/team）ReactRouterとは区別されます。

しかし、待ってください…ここに何か奇妙なことがあります。一見すると、 <Report> ルートは傍受します /dashboard/invoices と /dashboard/team、しかし実際にはそうではありません！

Reach Routerは、ポイントシステムを使用して、ルート定義をランク付けします。 path 価値。 2つのパスが衝突しているように見える場合、params（: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 必要ありません match URLパラメータにアクセスします。

次に、どのように調査しましょう <Link>ingは両方のライブラリで機能します。

リンクの比較

ReachRouterとReactRouterの両方がエクスポートします <Link> コンポーネントですが、いくつかの違いがあります。考えてみましょう <Dashboard> いくつかのサブページを持つコンポーネント。

まず、Reactルーターを使用します。

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

Reactルーターでは、具体的にする必要があります <Link> これは通常、使用する必要があることを意味します match.url ルートサブパスを超えるサブパスがある場合（例： /host/path1/path2). また、プログラムで行う必要があることに注意してください goBack 相対ナビゲーション用のユーティリティがないためです。

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

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

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

結論

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

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

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

getdocs

13036