react-router 作り方

ARANK

history で自分だけの最強のルーターライブラリを作ろう！react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。ルーティングに関する以下の処理は history ライブラリ内部で行われています。現在の URL から Location オブジェクトを作成する履歴の操作を行う履歴の変更を検知してコールバックを実行するreact-router は React 用のインターフェイスを提供しているに過ぎません。つまり、 history をベースに React コンポーネントやカスタムフックを作成すれば、比較的簡単に React 用ルーターライブラリを作成することができるのです。この記事では history を使って簡易的な react-router を作成する手順を紹介します。 history ライブラリについて ライブラリのソースコードはかなり少なく、すぐに全体を把握することができます。 History インターフェイス ライブラリはインターフェイスと実装…