🦃
React-router-domについて
作成日:
2022/01/25
4
react-router-domでページ遷移する
今回の教材では、ページ遷移はReact側のライブラリで行うことに。
$ npm install react-router-dom@5
でインストールしてsrc/App.js内に以下見本↓
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
// components
import { Restaurants } from './containers/Restaurants.jsx';
import { Foods } from './containers/Foods.jsx';
import { Orders } from './containers/Orders.jsx';
function App() {
return (
<Router>
<Switch>
// 店舗一覧ページ
<Route
exact
path="/restaurants">
<Restaurants />
</Route>
// フード一覧ページ
<Route
exact
path="/foods"
>
<Foods />
</Route>
// 注文ページ
<Route
exact
path="/orders">
<Orders />
</Route>
</Switch>
</Router>
);
}
export default App;
<Router>...</Router>
で全体を囲み、ルーティング先のコンポーネントを<Switch>...</Switch>
で囲む。例えばページ共通のヘッダーやフッターがある場合には<Switch>...</Switch>
の外に出しておく。
- 実行
.jsxコンポーネントを作成したのち、
npm start
でサーバーを立ち上げ、
→localhost:3000/restaurants
→localhost:3000/foods
→localhost:3000/orders
で遷移するのが確認できる
# 遷移時にパスにIDが入る場合の書き方
以下のような場合↓↓
フード一覧ページのURLは/restaurants/${restaurantsId}/foodsとしたいため、<Foods />
はrestaurantsIdをpropsとして受け取らなければならない。
containers/Foods.jsxでpropsを受け取って画面に表示するようにする。
<Route
exact
path="/restaurants">
<Restaurants />
</Route>
.jsxコンポーネントにパラメータを
パラメーターとして設定したい部分は:paramsNameと:を付ける。
<Route
exact
path="/restaurants/:restaurantsId/foods"
render={({ match }) =>
<Foods
match={match}
/>
}
/>
...(省略)...
- src/containers/Foods.jsx
React Routerの場合matchオブジェクトを受け取り、match.params.hogeのかたちでパラメーターを抽出することができる。
import React, { Fragment } from 'react';
export const Foods = ({
match
}) => {
return (
<Fragment>
フード一覧
<p>
restaurantsIdは {match.params.restaurantsId} です
</p>
</Fragment>
)
}
- src/App.jsでさらに以下の様に書き換え
コンポーネントにmatchというpropsを渡しながら、設定したPATHに対応するリクエストがあった場合にパラメーターと一緒にコンポーネントをレンダリングする。
render={({ match }) =>
<Foods
match={match}
/>