Navigation

📁 React

React Routerで認証が必要なページへのリダイレクトを実装する方法

📅 7月 9, 2025
👤
⏱ 2 min read

React Routerで認証が必要なページへのリダイレクトを実装する方法

概要

Reactアプリケーションで認証が必要なページへのリダイレクトを実装する方法について解説します。認証が必要なページにユーザーがアクセスした際、未ログインの場合はログインページにリダイレクトするなどの処理が必要となります。

なぜこの技術/パターンが必要なのか

認証が必要なページを保護するために、認証の有無をチェックし、必要に応じてリダイレクトを行うことが重要です。これにより、セキュリティを確保し、ユーザーエクスペリエンスを向上させることができます。

解決する問題やユースケース

  • 認証が必要なページに不正アクセスを防ぐ
  • ログインしていないユーザーをログインページに誘導する

前提知識と必要な依存関係

  • Reactの基本知識
  • React Routerの基本知識
  • 認証機能が実装されていること

基本実装


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

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

export default PrivateRoute;

TypeScript型定義


interface PrivateRouteProps {
  component: React.ComponentType<any>;
  isAuthenticated: boolean;
}

interface RouteProps {
  // ルーティングのプロップスの型定義
}

テストコード


import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';

test('should redirect to login if not authenticated', () => {
  render(
    <MemoryRouter initialEntries={['/protected']}>
      <PrivateRoute isAuthenticated={false} path="/protected" component={() => <div>Protected Page</div>} />
    </MemoryRouter>
  );

  expect(screen.queryByText('Protected Page')).toBeNull();
  expect(screen.getByText('Redirecting to Login...')).toBeInTheDocument();
});

パフォーマンス最適化

  • React.memoを使用してコンポーネントをメモ化する
  • useMemoを使用して値の再計算を最適化する
  • useCallbackを使用してコールバック関数をメモ化する

実践的な応用例


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import LoginPage from './LoginPage';
import DashboardPage from './DashboardPage';

const App = () => {
  const isAuthenticated = true; // ログイン状態を仮定

  return (
    <Router>
      <Switch>
        <Route path="/login" component={LoginPage} />
        <PrivateRoute isAuthenticated={isAuthenticated} path="/dashboard" component={DashboardPage} />
      </Switch>
    </Router>
  );
};

export default App;

関連技術・参考情報

  • [React Router 公式ドキュメント](https://reactrouter.com/)
  • [Next.js での認証とルーティング管理方法](https://next-auth.js.org/)
  • [React Router v6の新機能について](https://reactrouter.com/web/blog/2020/08/04/react-router-v6-pre.html)

この記事では、React Routerを使用して認証が必要なページへのリダイレクトを実装する手法を紹介しました。認証機能の追加やページ保護に役立つ実装方法として活用してみてください。

← Back to React