React react-router-dom ネストやパラメータについて 入門

前回react-router-domについて、画面遷移を学習しました。

今回は、ネストしたルート・ルートにパラメータで遷移できるようなメニューを作成して行こうと思います。

実際に手を動かしたい方は、以下からプロジェクトを作成ください。

App.jsなどを編集します。

スポンサーリンク

ネスト・パラメータのあるルーティングを作成

TopicsにTopicが複数あるようなルートについて作成してみましょう。

モジュールインポート

新しくuseRouteMatch・useParamsというモジュールを追加します。

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

親のルーティングを作成

App functionなどに最上位のルーティングを定義します。

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

ネストしないルートを作成

function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}

ネストするルートを作成

TopicsにネストするTopicを定義します

function Topics() {
  let match = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/recommend`}>
            おすすめ記事
          </Link>
        </li>
        <li>
          <Link to={`${match.url}/popularity`}>
            人気の記事
          </Link>
        </li>
      </ul>
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>トピックを選択してください</h3>
        </Route>
      </Switch>
    </div>
  );
}

Topicsにはおすすめの記事と人気の記事という二つのTopicを設定しています。

/topicsを選択した場合、トピックを選択してくださいのルートが表示されます。

おすすめ記事を選択するとrecommendをtopicIdとして<Topic />にパラメータとして渡します。

useRouteMatch()をconsole.logなどで出力すると以下のpath・url・isExact・paramsなどが設定されていることがわかります。

{path: "/topics", url: "/topics", isExact: true, params: {…}}
isExact: true
params: {}
path: "/topics"
url: "/topics"
__proto__: Object

詳細については、https://reacttraining.com/react-router/web/api/matchを参照ください。

Topicの関数を作成

パラメータからtopicIdを取得して、表示するようにします

function Topic() {
  let { topicId } = useParams();
  return <h3>リクエストされた topic ID: {topicId}</h3>;
}

useParams()をログに出すとLinkで設定したtopicIdが渡ってきていることが確認できます

// おすすめ記事を選択した場合
{topicId: "recommend"}
topicId: "recommend"
__proto__: Object
// 人気記事を選択した場合
{topicId: "popularity"}
topicId: "popularity"
__proto__: Object

ビルド

$ yarn start

おすすめ記事を選択

ここまででネスト・パラメータでのルーティングが完了しました!

まとめ

ネストに関しては、上位のルートを設定して、ネストしたいルートを作成していくという流れとなりました。

パラメータに関しては、urlで:<パラメータ項目>を定義して、子の表示関数にてパラメータを受け取って利用するという流れとなります。

画面遷移はどのWebサイトでも一般的ですので、使えるようになっていきたいです。