★前回の記事
ルーティングと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 binding(redux統合)は使用せず、react-router-domのみ使用します。
今回の変更
- ナビゲーション用のコンポーネント
Navbar
を追加します。 - ルート要素が指定された場合は、
Dashboard
コンポーネントを描画します。 /todo/{ユーザID}/todos
が指定された場合には、TodoComponent
を描画します
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 を表示します。
Dashboardが表示されました
http://localhost:3000/users/aaaa/todos を表示します。
タスク一覧が表示されました。まだログインしているユーザのタスクが表示されます。
http://localhost:3000/hoge/fuga を表示します。
Page Not Foundが表示されました。
うまく動いていますね。
以上でreact-router-domのインストールと設定は終了です。
★次回の記事
★目次