react-router-dom に入門してみた
React アプリの開発で、ルーティングを利用したいことがありました。
Railsのように画面と URL を対応した構成にしたかったのです。
/users/1 の 1 を動的にして操作対象のリソースを絞り込みたかったのです。
そこで react-router-dom を使ってみましたので簡単にまとめたいと思います。
シンプルで取っつきやすい router ライブラリ
やることは非常にシンプルです。
ルートとなるReact コンポーネント（デフォルトで作成される App.js になることが多い？）にライブラリが提供している <Router> コンポーネントを書きます。
その中に <Route> コンポーネントを使って「〇〇のパスなら〇〇コンポーネントを render する」というルールを書いていくだけです。
<Router>
<Route path="/about" exact>
<About />
</Route>
<Router>
もちろん Route は複数書けますし、書くことになるでしょう。
あとは、指定したパスに飛ばすためのリンクを何らかのボタンなりテキストなりに付与するだけです。
リンクを付与するには、Link コンポーネントを利用します。
<Link to="/aboute>About</Link>
これで文字列 About をクリックすると URL のパスが /about に変わります。
/about に変わるということは、Router に設定した通りに、About コンポーネントが render されるということです。
他にも色んな機能があるのですが、最低限必要なのはたったこれだけです。
簡単に導入できるところが気に入りましたね。
カスタムフックが便利
/users/1 の 1 をコンポーネント内で取得したいというのは良くあることだと思います。
そんな時には、コンポーネントに自動で渡される props から参照しても良いのですが、用意されているフックを使うのもお勧めです。
例えば、 useParams というフックを使うことによってURLパラメータを取得できます。
一般的にやりたいことは大体カバーしている印象です。
条件によってリダイレクトとかもできますし、そんなに困ることが思いつきません。
ちょっとベストプラクティスが分からなくて模索中なのが Jest でのテストとの兼ね合いなのですが、ここは機会があればまとめたいと思います😃
Discussion