【ReactとTypeScript】で使えるページ遷移仕組み

ReactとTypeScriptを使ってシンプルなページ遷移の仕組みを実装する方法を解説します。Reactは、コンポーネントベースのフレームワークで、シングルページアプリケーション（SPA）に適しており、ユーザーがページ間を移動する際に画面全体をリロードすることなくスムーズな遷移を提供します。TypeScriptを導入することで、型安全性を保ちながらコードの保守性を向上させることができます。

基本概念

Reactでのページ遷移は、通常React Routerというライブラリを使って実装します。React Routerは、クライアントサイドのルーティングを管理するためのライブラリで、異なるURLに対応した異なるコンポーネントを表示することができます。

事前準備

まず、以下のコマンドを使用してReactとTypeScriptのプロジェクトを作成し、React Routerをインストールします。

npx create-react-app my-app --template typescript
cd my-app
npm install react-router-dom

React Routerの基本設定

まず、src/index.tsxにReact Routerを設定します。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

次に、src/App.tsxに基本的なルーティングの設定を行います。

import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

const App: React.FC = () => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};

export default App;

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

続いて、各ページのコンポーネントを作成します。src/pages/ディレクトリを作成し、以下のように3つのファイルを作成します。

Home.tsx

import React from 'react';

const Home: React.FC = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the Home Page!</p>
    </div>
  );
};

export default Home;

About.tsx

import React from 'react';

const About: React.FC = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the About Page.</p>
    </div>
  );
};

export default About;

Contact.tsx

import React from 'react';

const Contact: React.FC = () => {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Feel free to reach out!</p>
    </div>
  );
};

export default Contact;

リンクを使ったページ遷移

React Routerでは、<Link>コンポーネントを使用して、ページ遷移を実現します。上記のApp.tsxでは、ナビゲーションバー内で<Link>を使って異なるページにリンクしています。

この方法では、ブラウザの全体リロードが発生せず、ページが動的に切り替わります。

URLパラメータを使ったページ遷移

React Routerでは、URLパラメータを使ってダイナミックなルーティングも簡単に実現できます。

以下は、ユーザーの詳細ページを実装する例です。

UserDetail.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

const UserDetail: React.FC = () => {
  const { userId } = useParams<{ userId: string }>();

  return (
    <div>
      <h1>User Detail Page</h1>
      <p>User ID: {userId}</p>
    </div>
  );
};

export default UserDetail;

App.tsxにルートを追加します。

tsxコードをコピーするimport UserDetail from './pages/UserDetail';

// 省略...

<Route path="/user/:userId" element={<UserDetail />} />

これにより、/user/123のようなURLにアクセスすると、userIdとして123がUserDetailコンポーネントに渡され、ページが表示されます。

React Routerの機能と活用例

React Routerには、上記以外にも以下のような機能が備わっています。

リダイレクト: あるURLにアクセスした際に、別のURLにリダイレクトさせることが可能です。
ネストルート: ルートの中にさらにサブルートを定義することができます。
プログラム的な遷移: useNavigateフックを使って、任意のタイミングでプログラム的にページ遷移を行うことができます。

プログラム的な遷移の例:

import { useNavigate } from 'react-router-dom';

const SomeComponent: React.FC = () => {
  const navigate = useNavigate();

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

  return <button onClick={handleClick}>Go to About</button>;
};

まとめ

ReactとTypeScriptを用いたシンプルなページ遷移の仕組みを解説しました。React Routerを使うことで、簡単にシングルページアプリケーションのような動的なページ遷移を実現できます。今回紹介した基本的なページ遷移の仕組みに加えて、URLパラメータやプログラム的な遷移などを駆使することで、より複雑なルーティングも実装可能です。ぜひ自分のプロジェクトでも活用してみてください。