はじめに
筆者は執筆時点でReactもReact Routerも触ったことがないエンジニアです。
とある機会でReact Routerを触ることになったのですが、
現状の理解度は
「React？Vueみたいなもんよな」「ReactとReact Routerと何が違うん」「そもそもReact Routerはなぜ生まれたん」程度のものなので、開発に先立って、理解を深めるために記事を書いてみます。
Reactでは何が問題だったのか
- Reactはあくまで「UIを構築するためのライブラリ」であり、標準ではURLを管理する機能を持たない。
- そのため、Reactだけで画面の切り替えを実装すると、以下のような問題が発生する。
- 画面遷移してもURLが変わらない。
- 「戻る」ボタンが効かない。
- 特定のページを開いていても、URLがトップページのままなので、ブックマーク・共有ができない。
React Routerでどう解決できるのか
- UIとURLを同期する・特定のURL（例: /about）にアクセスした時、対応するコンポーネントを表示できる。
- 履歴を管理する。「戻る・進む」ボタンでReact上の画面遷移を制御できる。
React Routerの仕組み
1. History API で URL の変化を監視・操作する
ブラウザ標準の History API (pushState, replaceState) を使用します。 通常、JavaScriptで window.location.href を書き換えるとページのリロードが走るが、pushState を使うとリロードを発生させずに URLだけ変更できます。
※History API について
2. URL をルート定義と照合し、最適な Route を選ぶ
あらかじめ解析したルートツリーに対し、
現在の URL をスコア付きでマッチングして一番合う Route を決める。
3. マッチ結果を React コンポーネントへ流し、再レンダーさせる
マッチしたルートの情報を元に、該当するコンポーネントが描画される。これにより URLの変化 → UIの切り替え が実現される。
参考記事