yucatio@システムエンジニア

趣味で作ったものいろいろ

react-router-domのインストールと設定 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

react-router

★前回の記事

yucatio.hatenablog.com

ルーティングとreact-router-domとredux統合

アプリににルーティング機能を追加します。 reactにおけるルーティングと、なぜルーティングが必要なのかはこちらがわかりやすいです。

React Router v4 の基本的な考え方と使い方 - 30歳からのプログラミング

reactにおけるルーティングといえば、react-routerですが、version 4からコア機能のreact-routerとweb用のreact-router-dom、React Native用のreact-router-nativeに分かれたようなので、今回はweb用のreact-router-domを利用します。

reduxとreact-routerを統合するのには、react-router-reduxが有名ですが、2018年10月現在非推奨となっています。 また、react-routerの公式ページには、ルーティング情報をreduxのstoreに保存することは非推奨と書いてあります。

Redux Integration

今回はredux binding(redux統合)は使用せず、react-router-domのみ使用します。

今回の変更

  • ナビゲーション用のコンポーネントNavbarを追加します。
  • ルート要素が指定された場合は、Dashboardコンポーネントを描画します。
  • /todo/{ユーザID}/todosが指定された場合には、TodoComponentを描画します

f:id:yucatio:20181012224251p:plain

f:id:yucatio:20181012224304p:plain

react-router-domのインストール

$ yarn add react-router-dom

App.jsの書き換え

ルーティングをApp.jsに記載します。

src/components/App.js(コメントは消してからデプロイしてください)

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'    // #1
import Login from './Login'
import Navbar from './Navbar'
import Dashboard from './Dashboard'
import TodoComponent from './TodoComponent'
import NoMatch from './NoMatch'

const App = () => (
  <BrowserRouter>  {/* #2 */}
    <div>
      <Login />  {/* #3 */}
      <Navbar />  {/* #3 */}
      <Switch>  {/* #4 */}
        <Route exact path="/" component={Dashboard} />  {/* #5 */}
        <Route exact path="/users/:uid/todos" component={TodoComponent} />  {/* #6 */}
        <Route component={NoMatch} />  {/* #7 */}
      </Switch>
    </div>
  </BrowserRouter>
)

export default App;
  • BrowserRouter, Route, Switchをreact-router-domからimportします(#1)。
  • URLと同期させたいコンポーネントをBrowserRouterで囲みます(#2)。
  • Login、Navbarは、すべてのAppコンポーネントで表示するので、Switchの外に書いておきます(#3)。
  • Switchは、配下のRoute要素で最初にマッチしたpathのコンポーネントを描画します(#4)。
  • /パスにマッチした場合は、Dashboradコンポーネントを描画します(#5)。exactを付けて、/だけにマッチするようにします。(exactがないと、/aaa/bbbなどにもマッチします。)
  • /users/:uid/todosにマッチした時に、TodoComponentを描画します(#6)。:uidの部分はパラメータになっており、/users/user_a/todosなどにマッチします。
  • path要素なしのRouteコンポーネントは、すべてのパスにマッチします(#7)。上記のどのパスにもマッチしなかった場合に、NoMatchコンポーネントが描画されます。

Navbar, Dashbord, NoMatchの実装

Navbar, Dashbord, NoMatchは、仮の実装しておきます。Navbar, Dashboardは後で実装します。

src/components/Navbar.js

import React from 'react'

const Navbar = () => (
  <div>Navbar</div>
)

export default Navbar;

src/components/Dashboard.js

import React from 'react'

const Dashboard = () => (
  <div>Dashbord</div>
)

export default Dashboard;

src/components/NoMatch.js

import React from 'react'

const NoMatch = () => (
  <div>Page Not Found</div>
)

export default NoMatch;

動作確認

http://localhost:3000 を表示します。

f:id:yucatio:20181012225211p:plain

Dashboardが表示されました

http://localhost:3000/users/aaaa/todos を表示します。

f:id:yucatio:20181012224951p:plain

タスク一覧が表示されました。まだログインしているユーザのタスクが表示されます。

http://localhost:3000/hoge/fuga を表示します。

f:id:yucatio:20181012225439p:plain

Page Not Foundが表示されました。

うまく動いていますね。

以上でreact-router-domのインストールと設定は終了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com