'React Router'の導入方法

1.インストール

まず、React Router のパッケージをインストールします。以下のコマンドを実行して、React Router の基本パッケージと、ルーティングに必要な依存パッケージをインストールしてください。

npm install react-router-dom

また、TypeScript を使用している場合は、型定義パッケージも追加します。

npm install @types/react-router-dom

2.ルーティングの設定

次に、アプリケーションのルートコンポーネントで React Router を設定します。以下のコードは、基本的なルーティングのセットアップ方法を示しています。

// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

3.ページコンポーネントの作成

Home, About, NotFound など、各ページのコンポーネントを作成します。例えば、Home ページコンポーネントは以下のようになります。

// src/pages/Home.jsx
import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

4.リンクの設定

ページ間のナビゲーションには Link コンポーネントを使用します。
例えば、Home ページから About ページに移動するリンクは以下のように設定できます。

// src/components/Navigation.jsx
import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

export default Navigation;

そして、App コンポーネントに Navigation コンポーネントを追加します。

// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

以上で、React Router を使用して基本的なルーティングが設定されました。必要に応じて、Route コンポーネントの element プロパティに渡すコンポーネントを変更し、さらに複雑なルーティングを設定することができます。