問題一覧に戻る
上級高度なパターンと型
問題97: React Router基礎

クライアントサイドナビゲーションのためのReact Router基礎を学びます。BrowserRouter、Routes、Routeコンポーネントでルートを設定します。宣言的ナビゲーションにLinkコンポーネント、プログラム的ナビゲーションにuseNavigateフックを使用してページ間を移動します。複数のビューを持つシングルページアプリケーションに必須です。

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

function Home() {
  {/* navigateフックを使用 */}
  const navigate = ();
  
  return (
    <>
      <h1>Home</h1>
      {/* プログラム的ナビゲーション */}
      <button onClick={() => navigate('')}>Go to About</button>
    </>
  );
}

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

function App() {
  return (
    <BrowserRouter>
      {/* Linkコンポーネント */}
      <nav>
        < to="/">Home</>
        <Link to="/">About</Link>
      </nav>
      
      {/* Routesコンテナ */}
      <>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={< />} />
      </>
    </BrowserRouter>
  );
}

export default App;