🦃 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}
    />
Takeuchi