前回作った TODOアプリに、 react-router を使ってルーティングを組み込んでみます。

できたものはこちら↓

todo-app-2

1. コンポーネントの構成

コンポーネントの構成は次のような形にします。

Components

また、ルーティングは次のとおりとします。

  • / トップページ
  • /:id 各TODOの詳細ページ

各TODOのリンクをクリックすると、その詳細が表示されるという簡単なものです。

2. 実装

前回はちょっとややこしい作りにしてましたが、今回はAppコンポーネントだけでstate管理をし、他のコンポーネントは基本レンダリングするだけにしました。

※一応、残りの主要なコンポーネントもGistにあげてます。

3. おわりに

TODOアプリにreact-routerを使ってルーティングを組み込んでみました。

次はReduxを触ってみる予定です。