Reactルーターのフック

React Router V5は、強力なフックメカニズムを導入し、4つの便利なルーティングフックを提供し、ルーティング管理を簡素化します。この記事は、新しいルーティングレンダリングモードを最初に導入し、次に各フックの使用を掘り下げて、React Router V5の新しいモードからすぐに開始されます。

v5の前にルーターを反応します

//ルートをレンダリングし、ルート属性を取得します<route component="{Home}" path="/"></route>

//追加プロパティを渡します<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile>} /></route>

component構文を使用する場合、ルーティングプロパティ（ match 、 location 、 history ）が暗黙的にコンポーネントに渡されます。ただし、追加のプロパティを渡す必要がある場合は、代わりにrenderプロパティを使用する必要があります。 component構文にインライン関数を追加すると、レンダリングされるたびにコンポーネントが再変更されることに注意してください。

V5の後にルーターを反応します

<route path="/"><home></home></route>

Homeコンポーネントは、ルーティングプロパティを暗黙的に受信しなくなりました。ただし、 Route自体を変更せずに、 Homeコンポーネントに追加のプロパティを追加できます。レンダリングするたびにコンポーネントを再開する問題は避けてください。これは、より簡潔で効率的なAPI設計です。

ルーティングプロパティは暗黙的に渡されなくなったため、 match 、 history 、またはlocationアクセスする方法は？ withRouterですべてのコンポーネントをラップする必要がありますか？これがフックが作用する場所です。

フックはReact 16.8で導入されたため、Reactを使用する必要があることに注意してください。

useHistoryフック

• Reactルーターのhistory属性へのアクセスを提供します。
• ルートで使用されるhistoryパッケージの依存関係を指します。
• 主に、 push 、 replaceなどの機能を介したプログラムルーティングに使用されます。

 「React-Router-Dom」から{usehistory}をインポートします。

function home（）{
  const history = usehistory（）;
  return <button onclick="{()">history.push（ '/profile'）}> profile</button> ;
}

useLocationフック

• Reactルーター内のlocation属性へのアクセスを提供します。
• ブラウザのwindow.locationと同様ですが、ルーティングのステータスと場所を表し、どこでもアクセスできます。
• 主にクエリパラメーターまたは完全なルーティング文字列にアクセスするために使用されます。

 「React-Router-Dom」から{uselocation}をインポートします。

関数プロファイル（）{
  const location = uselocation（）;
  effect（（）=> {
    const currentPath = location.pathname;
    const searchparams = new urlsearchparams（location.search）;
    // ... CurrentPathとSearchParamsを使用します
  }、 [位置]）;
  戻る<p>プロフィール</p>;
}

locationプロパティは不可能であるため、 useEffectルートが変更されるたびに関数を呼び出します。これは、検索パラメーターまたは現在のパスを操作するのに最適です。

useParamsフック

• URL内のパラメーターへのアクセスを提供します。
• この機能は、以前はmatch.paramsを通じてのみ実装されていました。

 「React-Router-Dom」から{useparams、route}をインポートします。

関数プロファイル（）{
  const {name} = useparams（）;
  戻る<p>{name}のプロファイル</p>;
}

function dashboard（）{
  戻る （
    <div>
      <nav>
        <link to="{`/profile/ann`}">アンのプロフィール
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  ）;
}

useRouteMatchフック

• matchオブジェクトへのアクセスを提供します。
• 引数がない場合、コンポーネントまたはその親コン​​ポーネントで最も近い一致が返されます。
• 主にネストされたパスを構築するために使用されます。

 「React-Router-Dom」から{useroutematch、route}をインポートします。

function auth（）{
  const match = useroutematch（）;
  戻る （
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  ）;
}

useRouteMatch使用して、 locationパラメーターを渡すことにより、 Routeをレンダリングせずに一致するmatchにアクセスすることもできます。

たとえば、プロファイルを/profileにする必要があると仮定し、URLにその人の名前（ /profile/danまたは/profile/ann ）が含まれている場合、他のプロファイルをレンダリングします。フックを使用しない場合は、 Switchを作成し、2つのルートをリストし、小道具でカスタマイズする必要があります。しかし、今、フックを使用することでこれを行うことができます：

 {React-router-dom 'からrouter、link、useroutematchとしてroute、browserrouter}をインポートします。

関数プロファイル（）{
  const match = useroutematch（ '/profile/：name'）;
  マッチを返す？<p> {match.params.name}のプロファイル</p> ：<p>私自身のプロフィール</p>;
}

デフォルトのfunction app（）をエクスポート{{
  戻る （
    <router>
      <nav>
        <link to="/profile">私のプロフィール
        <br>
        <link to="{`/profile/ann`}">アンのプロフィール
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  ）;
}

また、 sensitiveとしてuseRouteMatchにexactなどのすべてのRouteプロパティを渡すこともできます。

要約します

フックと明示的なRoute自体には、隠された利点があります。これらのフックは、初期モードで出現した混乱と複雑さの多くを回避し、ヒューマンエラーを減らし、ルーティングコードを維持しやすくし、新しいReactルーターバージョンにアップグレードしやすくなります。

以上がReactルーターのフックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。