目次
ルーティングとは
タスク管理アプリケーションでは，
- タスクの新規作成
- 既存タスクの編集
- タスクの一覧表示
のように複数の機能があります．
複数の機能をもつアプリケーションを複数のページに分割して，複数のURLに応じて動的にページを切り替える仕組みをルーティングといいます．
そして，このURLやパスは，Webアプリケーションではルートといいます．
Reactでは，ルーティングをreact-router-domというライブラリを利用して，実装するのが一般的です．
ルーティングの実装
ルートを次のように定義します．
- 表示（’/’）
- 作成（’/create’）
- 編集（’/update’）
このルートをsrc/constants/routes.jsに次のように記述します．
export const SHOW = '/';
export const CREATE = '/create';
export const UPDATE = '/update/:id';
export const BUILD_UPDATE = (id) => `/update/${id}`;これで，このアプリケーションで使用するすべてのルートが定義されました．
次に，これらのルートに対してユーザがアクセスするために，ルーティングを行うルータを実装します．App.jsを次のよう記述します．
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import * as ROUTES from '../constants/routes';
import Show from './Show';
import Create from './Create';
import Update from './Update';
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path={ROUTES.SHOW} component={Show}/>
<Route path={ROUTES.CREATE} component={Create} />
<Route path={ROUTES.UPDATE} component={Update} />
</Switch>
</Router>
);
}
}
export default App;React－Routerでは，Routerコンポーネントを使用してルータを実装します．Routerコンポーネントの使い方は，切り替える対象のコンポーネント全体をRouterで囲むだけです．ここでは，各コンポーネントをRouterで囲んでいます．
次に，Routeコンポーネントを使用して，どのルートにどのコンポーネントを割り当てるかを定義します．具体的には，現在のURLとpathを比較し，一致したコンポーネントを描画します．
ここで，exactとはpathに正確に一致した場合に指定したコンポーネントを描画します．
コメント