react-router-domを使ったルーティング方法メモ
はじめに
react-router-domを利用して基本のページ遷移を実施する。
react-router-domは2021/11/3にバージョン6がリリースされたようだが、情報が少なくて独学が難しいのでバージョン5から始める。
react-router-dom@バージョン5
インストール
以下をインストールする。
$ yarn add react-router-dom@5.x $ yarn add @types/react-router-dom
超基本の形
基本的な使い方は以下。
期待する動作
localhost:8000にアクセスするとHomeページが表示される。localhost:8000/mypageにアクセスするとMyPageが表示される。- リンクは常に表示される。
ディレクトリ構成
my-router ├── App.tsx ├── index.css ├── index.tsx ├── pages │ ├── Home.tsx │ └── MyPage.tsx └── router └── Router.tsx
ソースコード
App.tsx
import { BrowserRouter, Link } from "react-router-dom"; import { Router } from "./router/Router"; function App() { return ( <BrowserRouter> {/* 常に表示する部分 */} <Link to="/">Link to Home</Link> <br /> <Link to="/mypage">Link to MyPage</Link> {/* ルーティングする部分 */} <Router /> </BrowserRouter> ); } export default App;
Router.tsx
import { Switch, Route } from "react-router-dom"; import { Home } from "../pages/Home"; import { MyPage } from "../pages/MyPage"; export const Router = () => { return ( <Switch> <Route exact path="/" render={() => <Home />} /> <Route path="/mypage" render={() => <MyPage />} /> </Switch> ); };
BrowserRouter
react-router-domを利用する合図のようなもの。全体をこれで囲む必要がある。
Link
<a>タグの役割をするもの。
Swtich
ルーティング部分（URLごとに表示するコンポーネントを指定する部分）を囲む。
ネストする場合
期待する動作
localhost:8000にアクセスするとHomeページが表示される。localhost:8000/mypageにアクセスするとMyPageが表示される。localhost:8000/mypage/mapage-detailにアクセスするとMyPageDetailが表示される。- リンクは常に表示される。
ディレクトリ構成
pagesディレクトリに、MyPageの詳細ページを追加する。
├── pages │ ├── Home.tsx │ ├── MyPage.tsx │ └── MyPageDetail.tsx
ソースコード
先ほどのApp.tsxにおいて
<Route path="/mypage" render={() => <MyPage />} />
の部分を、以下のように書き換える。
<Route
path="/mypage"
render={(props) => {
const url = props.match.url;
console.log(props)
return (
<Switch>
<Route exact path={url} render={() => <MyPage />} />
<Route path={`${url}/mypage-detail`} render={() => <MyPageDetail />} />
</Switch>
);
}}
/>
注意点として、Router側をネストしているからといって<Link>には関係ないので、<Link>の中身はto = "/mypage/mypage-detail"と記載しなくてはならない。to="/mypage-detail"とするのはNG。
Mypage.tsx※MyPage内に、MyPageDetailへのリンクを表示
import { Link } from "react-router-dom"; export const MyPage = () => { return ( <div> <h1>Mypage</h1> <Link to="/mypage/mypage-detail">link to MyPageDetail</Link> </div> ); };
url
renderに設定する無名関数にはpropsが渡されている。
ここで、props.match.urlにはRouteの引数に取ったpath="/mypage"の値が入っている。
propsの中身は、localhost:8000/mypageにアクセスしたときは以下で、
localhost:8000/mypage/mypage-detailにアクセスすると以下のようになっている。
locationは「今アクセスしているURL」に関わる情報が入っていそう。一方でmatchは、事前に<Route>で指定した値や、isExact（今アクセスしているURLと、事前に<Route>で指定したpathが等しいかどうか）等の比較に関わる値が入っていそう。
また、ネストが増えていくとコードが見にくくなっていくので、<Switch>文の中身をmap文で回すことも推奨されている。（参考文献参照）
<Link>タグではなくuseHistoryを使う方法
<a>タグではなく、ボタンをクリックした際などのイベントにページ遷移を紐づけたい場合は、useHistory()関数を利用する。
やり方は別記事に記載した。
参考文献
react-router-dom@バージョン6
バージョン6のやり方を覚え次第追記予定。
おわりに
react-router-domを利用してルーティングを設定し、<Link>から遷移する基本のやり方をメモした。
