react-router-dom で ルーティングを実装する

React で ルーティングをする為のライブラリでデファクトスタンダードとなっているのが react-router です。 そして、Web 上で利用できるように DOM にバインディングができるライブラリが react-router-domです。

reacttraining.com

github.com

ちなみに、react-router と react-router-dom の違いが気になったのですが、この記事がとても参考になりました。

qiita.com

react-rourer-dom を追加する

react-rourer-dom と TypeScript を使用する為、型定義ファイルを追加します。

yarn add react-router-dom @types/react-router-dom

BrowserRouter でアプリケーションをラップする

History API を利用して URL と連動した React アプリケーションとなるように <BrowserRouter></BrowserRouter> で全体をラップします。 ここでは、公式ドキュメントのクイックスタートを倣って BrowserRouter as Router として Router という別名で使用します。

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom'
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

route を設定する

route の設定を行う為に react-router-dom から、Switch と Route と Redirect コンポーネントをインポートします。 それぞれの コンポーネント の役割がこちらです。

コンポーネント	役割
Switch	route の設定に応じてコンポーネントをレンダリングするエリア
Route	パスに紐づくコンポーネントを定義する
Redirect	リダイレクトを担うコンポーネント

// src/App.tsx

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom'
import Home from './components/Home'
import About from "./components/About";

const App: React.FC = () => {
  return (
    <div className="App">
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
        <Redirect to="/" />
      </Switch>
    </div>
  );
}

export default App;

設定したルーティングの内容で画面遷移を行う

実際に画面に遷移を行う為には、<a></a> ではなく、<Link></Link>コンポーネントを使用します。

// src/components/Home/index.tsx

import React from 'react'
import {Link} from 'react-router-dom'

const Home: React.FC = () => (
  <>
    <h1>This is Home</h1>
    <Link to="/about">About</Link>
  </>
);

export default Home

動的なルーティング

動的なルーティングを行う場合は <Route path="/dynamic/:id"></Route> のように :○○ とします。

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom'
import Home from './components/Home'
import About from "./components/About";
import Dynamic from "./components/Dynamic";

const App: React.FC = () => {
  return (
    <div className="App">
      <Switch>
        <Route path="/dynamic/:id">
          <Dynamic />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
        <Redirect to="/" />
      </Switch>
    </div>
  );
}

export default App;

/dynamic/:id に紐づくコンポーネントはこのようにしています。

// src/components/Dynamic/index.tsx

import React from 'react'
import {useParams, Link} from 'react-router-dom'

const Dynamic: React.FC = () => {
  const dynamicId = useParams<{id: string}>().id

  return (
    <>
      <h1>This is Dynamic: {dynamicId}</h1>
      <Link to="/">Home</Link>
    </>
  )
}

export default Dynamic

パスの :id をコンポーネント側で取得する際は、useParams() を使用します。 取得したいパラメータを useParams<{id: string}>() のようにジェネリクスで指定します。

こちらの記事のように RouteComponentProps という型定義をインポートして型結合する方法でも対応できます。

www.devlog.site