6. Routing

React Routerの使用

React Routerは、Reactアプリケーションにルーティング機能を追加するための標準的なライブラリです。これを使用することで、複数のページやビューを管理し、ユーザーのナビゲーションを容易にします。

基本的な使用方法

以下は、React Routerの基本的なセットアップとルーティングの例です：

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

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

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

この例では、BrowserRouterを使ってルーティングを設定し、Routeコンポーネントを使って異なるパスに対応するコンポーネントをレンダリングしています。また、Linkコンポーネントを使ってナビゲーションリンクを作成しています。

動的ルーティング

React Routerを使って動的にルートを生成することも可能です。URLパラメータを使用して、動的なコンテンツをレンダリングすることができます。

使用例

以下は、URLパラメータを使った動的ルーティングの例です：

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

function User() {
  let { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>

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

export default App;

この例では、:idというパラメータを持つルートを定義し、useParamsフックを使用してURLパラメータを取得しています。

ルートガード

ルートガードを使用して、特定の条件を満たす場合にのみアクセスを許可するようにルートを保護することができます。これにより、認証や認可のロジックを簡単に実装できます。

使用例

以下は、認証状態に基づいてルートを保護する例です：

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

const isAuthenticated = false; // この値は認証状態に応じて動的に変わる

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

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

function Login() {
  return <h2>Login</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <PrivateRoute path="/dashboard">
            <Dashboard />
          </PrivateRoute>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

この例では、PrivateRouteコンポーネントを使用して、認証されていないユーザーが特定のルートにアクセスしようとした場合に、ログインページにリダイレクトするように設定しています。

---

このように進めていきます。他に追加や修正の希望があればお知らせください。