React Router でルーティングを管理しよう(初心者向け)

当サイトでは一部リンクに広告が含まれています
Reactアイコン
目次

React Routerとは?

React Routerは、Reactアプリケーションでルーティングを管理するための一連のナビゲーションコンポーネントです。
これにより、URLに基づいて異なる画面やデータをユーザーに表示することができます。

React Routerのインストール方法

React Routerを使用するためには、まずライブラリをプロジェクトにインストールする必要があります。
npmを使用する場合、ターミナルで以下のコマンドを実行します。

npm install react-router-dom

React Routerの基本的な使い方

React Routerを使った基本的なルーティングを見てみましょう。以下は、ホームページとユーザーページを切り替える簡単な例です。

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

function Home() {
  return <h2>ホーム</h2>;
}

function User() {
  return <h2>ユーザー</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/user/">ユーザー</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/user/" component={User} />
      </div>
    </Router>
  );
}

export default AppRouter;

この例では、<BrowserRouter>コンポーネントを使ってルーティングを設定しています。
また、<Link>コンポーネントを使ってリンクを作成し、<Route>コンポーネントで各ページのルートを定義しています。

【具体例】パラメータを使用したルーティング

URLにパラメータを含めて、その値に基づいて表示内容を変えることもできます。以下はその例です。

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

function User({ match }) {
  return <h2>ユーザーID: {match.params.id}</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/1">ユーザー1</Link>
            </li>
            <li>
              <Link to="/user/2">ユーザー2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
}

export default AppRouter;

この例では、:idというパラメータをURLに含めています。このパラメータの値は、match.params.idで取得することができます。

【具体例2】React Routerを使った簡単なウェブアプリの作成

React Routerを使って、簡単なウェブアプリを作ってみましょう。
このウェブアプリでは、「ホーム」「記事」「プロフィール」という3つのページを作ります。

プロジェクト作成

まず、Reactアプリケーションを作成します。

npx create-react-app react-router-app
cd react-router-app
npm start

必要なパッケージのインストール

まず、React Routerを使うために、react-router-domパッケージをインストールします。

npm install react-router-dom

App.jsの編集

次に、App.jsを編集してルーティングを設定します。

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

// ページのコンポーネント
import Home from './Home';
import Article from './Article';
import Profile from './Profile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">ホーム</Link></li>
            <li><Link to="/article">記事</Link></li>
            <li><Link to="/profile">プロフィール</Link></li>
          </ul>
        </nav>

        {/* 各ページへのルート設定 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/article" element={<Article />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

// ページのコンポーネント
import Home from './Home';
import Article from './Article';
import Profile from './Profile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">ホーム</Link></li>
            <li><Link to="/article">記事</Link></li>
            <li><Link to="/profile">プロフィール</Link></li>
          </ul>
        </nav>

        {/* 各ページへのルート設定 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/article" element={<Article />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

ここでは、<BrowserRouter>コンポーネントを使ってルーティングを設定しています。
また、<Link>コンポーネントを使ってリンクを作成し、<Route>コンポーネントで各ページのルートを定義しています。

各ページのコンポーネント作成

最後に、各ページのコンポーネントを作成していきます。

touch src/Home.js
touch src/Article.js
touch src/Profile.js

それぞれ、以下のようにコンポーネントを作成します。

Home.js

import React from 'react';

function Home() {
  return <h2>ホーム</h2>;
}

export default Home;

Article.js

import React from 'react';

function Article() {
  return <h2>記事</h2>;
}

export default Article;

Profile.js

import React from 'react';

function Profile() {
  return <h2>プロフィール</h2>;
}

export default Profile;

これで完成です。
ブラウザでアプリを開き、リンクをクリックしてページが切り替わることを確認しましょう。
npm start 実行後、通常は http://localhost:3000/ でアクセスできます)

React Routerのメリット

  1. コンポーネントベース: Reactのコンポーネントと同じように、ルーティングもコンポーネントベースで管理できます。
  2. 動的ルーティング: ユーザーの操作に応じて動的にルーティングを変更できるため、ユーザーに合わせたページを表示できます。
  3. パラメータとクエリ: URLにパラメータやクエリを含めることができるため、ユーザーの操作に応じて表示内容を変更できます。

React Routerの使いどころ

React Routerは、以下のような場面で活用できます。

  • ユーザーの操作に応じて表示内容を変更したい場合
  • URLにパラメータやクエリを含めて、表示内容を変更したい場合
  • ページ遷移をアニメーションで演出したい場合

上記のような場面で、React Routerを活用することで、ユーザーにとって使いやすいアプリケーションを作ることができます。

React Routerの注意点

同じパスを持つルート

React Routerは、複数の<Route>が同じパスにマッチした場合、すべてのルートをレンダリングします。
このため、あるパスに対して1つだけルートをレンダリングさせたい場合は、<Switch>コンポーネントを使用してください。

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

<Router>
  <Switch>
    <Route path="/user/:id" component={User} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

ルートの順序

React Routerは、<Switch>内のルートを上から順に評価します。

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

<Router>
  <Switch>
    <Route path="/user/:id" component={User} />
    <Route path="/user/new" component={NewUser} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

ここで注意したいのが、上記の例では、/user/new/user/:idと同じパスを持っています。
このため、/user/newにアクセスした場合、/user/:idのルートが先に評価され、/user/newのルートは評価されません。

このような場合は、/user/newのルートを<Switch>内の一番上に移動させることで、/user/newのルートが先に評価されるようにします。

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

<Router>
  <Switch>
    <Route path="/user/new" component={NewUser} />
    <Route path="/user/:id" component={User} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

こうすることで、/user/newにアクセスした場合、/user/newのルートが先に評価されるようになります。

まとめ

React Routerは、Reactのコンポーネントベースでルーティングを管理できるライブラリです。

React Routerを使うことで、ユーザーの操作に応じて表示内容を変更したり、URLにパラメータやクエリを含めて表示内容を変更したりすることができます。
また、React Routerは、<Switch>コンポーネントを使うことで、ルートの順序を変更することができます。

React Routerを用いて、ユーザーにとって使いやすいアプリケーションを作っていきましょう!

転職のためにReactを学ぶならプログラミングスクールがおすすめ

React には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • Reactエンジニアとして活躍するために何をすればいい?
  • 何から勉強すればいいんだろう?
  • 絶対に転職を成功させるには?

そんな方は、転職サポートまでおまかせできるプログラミングスクールも検討してみてもいいかもしれませんね。

無料で体験レッスンを1週間受けられるスクールや、給付金により実質15万円以下で6ヶ月も学べるスクールもありますので、まずは気軽に無料カウンセリングを受けてみてはいかがでしょうか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フルスタックWebエンジニアであり、プログラミングスクール講師でもあります。
プログラミングスクールのカリキュラム執筆にも携わっており、プログラミング教材に精通しています。
Rails / React / Next.js / Vue.js / AWS が得意技術。

目次