Webブラウザ向けならReact Router DOM！React Routerとの違いを解説

2024-04-02

React RouterとReact Router DOMの違いと使い分け

React Routerは、Reactアプリケーションにおけるルーティング機能の核となるライブラリです。以下のような機能を提供します。

URLと画面コンポーネントのマッピング
画面遷移の制御
パラメータの受け渡し
ネストされたルーティング

React Routerは、Webブラウザだけでなく、React Nativeなどの他の環境でも動作します。

React Router DOMは、React Routerの上に構築されたライブラリであり、Webブラウザ環境でのみ使用できます。以下の機能を提供します。

<BrowserRouter>コンポーネント：ブラウザ履歴に基づいたルーティングを管理
<Link>コンポーネント：画面遷移用のリンクを作成
<NavLink>コンポーネント：アクティブなリンクをスタイル設定
<Redirect>コンポーネント：別のURLへリダイレクト

React Router DOMは、React Routerよりも軽量で使いやすい設計になっています。

React RouterとReact Router DOMのどちらを使うべきかは、以下の条件によって判断できます。

React Routerを使うべき場合

Webブラウザだけでなく、React Nativeなどの他の環境でも動作するアプリケーションを開発している場合
より高度なルーティング機能が必要な場合

Webブラウザ向けのアプリケーションを開発している場合
軽量で使いやすいルーティングライブラリを求めている場合

React RouterとReact Router DOMは、Reactアプリケーションにおける画面遷移を制御するための重要なライブラリです。それぞれの役割と使い分けを理解し、適切なライブラリを選択することが重要です。

React Router

import React from 'react';
import { Router, Route } from 'react-router';

const App = () => (
  <Router>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
);

const Home = () => (
  <h1>Home</h1>
);

const About = () => (
  <h1>About</h1>
);

export default App;

React Router DOM

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

const App = () => (
  <BrowserRouter>
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
);

const Home = () => (
  <h1>Home</h1>
);

const About = () => (
  <h1>About</h1>
);

export default App;

上記のサンプルコードは、React RouterとReact Router DOMそれぞれを使ったシンプルなアプリケーションです。

Routerコンポーネントは、URLと画面コンポーネントのマッピングを定義します。
Routeコンポーネントは、特定のURLにアクセスしたときに表示される画面コンポーネントを指定します。

React Router DOMでは、<BrowserRouter>コンポーネントを使ってブラウザ履歴に基づいたルーティングを管理できます。

React RouterとReact Router DOM以外で画面遷移を制御する方法

window.location.hrefを使う

最も簡単な方法は、window.location.hrefプロパティを使ってURLを直接変更する方法です。

const handleClick = () => {
  window.location.href = '/about';
};

この方法はシンプルですが、以下の問題があります。

ブラウザ履歴が更新されない
画面遷移時のアニメーションなどの演出ができない
パラメータを簡単に渡せない

状態管理ライブラリを使う

Reduxなどの状態管理ライブラリを使って、アプリケーションの状態を管理し、それに応じて画面遷移を制御する方法もあります。

const store = createStore(reducer);

const Home = () => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({ type: 'GO_TO_ABOUT' });
  };

  return (
    <div>
      <button onClick={handleClick}>Aboutへ移動</button>
    </div>
  );
};

const About = () => {
  return (
    <h1>About</h1>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'GO_TO_ABOUT':
      return {
        ...state,
        page: 'about',
      };
    default:
      return state;
  }
};

export default App;

しかし、状態管理ライブラリの導入や設定が必要になるため、React Routerよりも複雑になります。

カスタムフックを使う

React Hooksを使って、画面遷移を制御するカスタムフックを作成する方法もあります。

const useGoTo = () => {
  const history = useHistory();

  const go = (path) => {
    history.push(path);
  };

  return go;
};

const Home = () => {
  const go = useGoTo();

  const handleClick = () => {
    go('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Aboutへ移動</button>
    </div>
  );
};

const About = () => {
  return (
    <h1>About</h1>
  );
};

export default App;