React Routerを使わずに画面遷移を実現する方法とは？

Reactで画面遷移を行う方法といえば、まず思い浮かぶのが「React Router」の使用です。しかし、シンプルな構成のアプリや、ライブラリを増やしたくない場合には、あえてReact Routerを使わずに自前で画面遷移を実装することもできます。本記事では、React Routerを使わずに画面を切り替える方法について、その仕組みと実装例を紹介します。

なぜReact Routerを使わない選択肢があるのか？

React Routerは非常に便利なライブラリですが、機能が多いため学習コストがそれなりにあります。ちょっとしたデモや、シンプルな単一ページ構成のアプリであれば、わざわざ導入せずに画面切り替えを実装することも十分可能です。ライブラリの依存を減らしたい、コードを軽量に保ちたいという場合にも適しています。

方法1：状態（state）による表示切り替え

もっとも基本的な方法は、Reactの状態（useState）を利用して、どの画面を表示するかを制御するやり方です。

import { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');

  return (
    <div>
      <nav>
        <button onClick={() => setPage('home')}>ホーム</button>
        <button onClick={() => setPage('about')}>アバウト</button>
      </nav>

      {page === 'home' && <Home />}
      {page === 'about' && <About />}
    </div>
  );
}

function Home() {
  return <h1>ホーム画面</h1>;
}

function About() {
  return <h1>アバウト画面</h1>;
}

この例では、pageという状態に応じて表示するコンポーネントを切り替えています。URLは変化しませんが、画面遷移と同じような体験を実現できます。

方法2：window.location.hash を使った簡易ルーティング

URLを変更したい場合は、#（ハッシュ）付きURLと window.location.hash を使う方法もあります。これはブラウザの履歴に対応しており、戻る・進むボタンも機能します。

import { useEffect, useState } from 'react';

function App() {
  const [page, setPage] = useState(window.location.hash || '#home');

  useEffect(() => {
    const onHashChange = () => setPage(window.location.hash);
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  return (
    <div>
      <nav>
        <a href="#home">ホーム</a>
        <a href="#about">アバウト</a>
      </nav>

      {page === '#home' && <Home />}
      {page === '#about' && <About />}
    </div>
  );
}

この方法なら、URLが #home や #about に変化し、リロードしても同じ画面を表示できます。シンプルなルーティングが必要な場合に便利です。

まとめ

React Routerを使わずとも、状態やハッシュURLを使えば、画面遷移のような動作を実現することができます。アプリの規模や目的に応じて、あえて軽量な実装を選ぶことで、開発効率や保守性を高めることが可能です。最初はReactの基本機能だけで構成し、必要に応じてRouterを導入するというアプローチもおすすめです