こんにちは、フロントエンドエンジニアの峯です。
React開発を行う際のルーティングは皆さんどのように行ってますでしょうか？
私は何も考えずにReactRouter使ってます。
最近React v17がリリースされたようです。
大きな新機能はないようですが、v16から進化を続けているのがHooksです。
私もまだまだ勉強中なのですが、ReactRouterがHooksに対応してhistory周りが使いやすくなっているようです！
今回はその紹介になります。
目次
はじめに
React Router Hooksを使う場合は、もちろんReact自体Hooksに対応する必要がるので、v16.8以上を使用する必要があります。
主なメソッド
useHistoryuseLocationuseParamsuseRouteMatch
全てreact-router-domからインポートして利用します。
import React from 'react'
// 例：useHistoryを利用する場合
import { useHistory } from 'react-router-dom'
...
useHistory
history APIにアクセスして、push()による遷移やlocationからパス位置の取得が可能です。
push()
- 第一引数に遷移先のパスを指定します。
import { useHistory } from 'react-router-dom'
function Header() {
// 1. インスタンスを生成
const hisotry = useHistory()
const toHome = () => {
// 2. ./homeに遷移
hisotry.push('/home')
}
return(
<button type="button" onClick={toHome}>
Home
</button>
)
}
useLocation
現在のパス情報を取得することができます。
location
- ハッシュ値や、パスネーム、クエリパラメータが取得可能です。
import { useLocation } from 'react-router-dom'
function Header() {
const location = useLocation()
return(
<ul>
<li>
{
location.pathname === '/' ?
<span>Home</span> : <a href="/">Home</a>
}
</li>
<li>
{
location.pathname === '/blog' ?
<span>Blog</span> : <a href="/blog">Blog</a>
}
</li>
<li>
{
location.pathname === '/profile' ?
<span>Profile</span> : <a href="/profile">Profile</a>
}
</li>
</ul>
)
}
useParams
動的なidなどのパラメータ値を扱うことができます。
BrowserRouterを仕込む際にどう定期なデータを扱う場合は :keyを指定します。
ここでは、各ユーザーidを扱うことを想定します。
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/blog" component={Blog} />
{/* :id 動的な値を受け取ることを可能にします。 */}
<Route exact path="/user/:id" component={User} />
</Switch>
</BrowserRouter>
遷移先のコンポーネントで、パラメータを取得します。
import React from 'react'
import { useParams } from 'react-router-dom'
function User() {
// idを取得します。
const { id } = useParams()
return (
<div>ユーザーID： {id} </div>
)
}
useRouteMatch
useRouteMatchはパスの条件を元にコンポーネント単位でレンダリングの制御が可能になります。
import React from 'react'
import { useParams, useRouteMatch } from 'react-router-dom'
function User() {
const { id } = useParams()
// id指定のURLがマッチ条件
const match = useRouteMatch('/user/:id')
return (
<>
<div style={style.frame}>ユーザーページ</div>
{
match ? <div>表示中のユーザー：{id}</div> : null
}
</>
)
}
Router = ページ のような切り分けを取っ払うことができます。
Hooks APIによって、よりメソッド単位でのミニマムな開発に対応しているといったところでしょうか？
useLocationでやっていたような事はすべてuseRouteMatchでできそうですね。
さいごに
React Hooksの登場により、小規模の開発導入にも対応しやすくなりました。
Hooks APIに対応するライブラリも続々と増えてきているようですし、これからのステータスになることは間違いなしです！
私もまだ勉強中ですが、今回紹介したReactRouterのHooks APIにより、ルーティングまわりの開発がスムーズな形で実現できるのではないかなと思います。
最後までご覧いただきありがとうございました。