React Router v5 のインストールと使用方法

まず、React Router v5 をインストールするには、プロジェクトのディレクトリで以下のコマンドを実行します:

npm install react-router-dom@5

または

yarn add react-router-dom@5

これにより、React Router v5 がプロジェクトに追加されます。

次に、React コンポーネント内で React Router を使用する方法を見てみましょう。以下の例では、App コンポーネント内でルーティングを設定します。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => <h1>ホームページ</h1>;
const About = () => <h1>について</h1>;
const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">ホーム</Link>
          </li>
          <li>
            <Link to="/about">について</Link>
          </li>
        </ul>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};
export default App;

上記の例では、react-router-dom ライブラリから BrowserRouter、Route、および Link をインポートしています。BrowserRouter はルーティングのコンテナであり、Route は指定されたパスに対応するコンポーネントを表示します。Link コンポーネントは、ナビゲーションメニューなどで使用されるリンクを提供します。

<Route> コンポーネントの path プロパティには、表示したいコンポーネントに対応するパスを指定します。exact を使用することで、指定したパスと完全に一致する場合にのみコンポーネントが表示されるようになります。

上記の例では、/ パスには Home コンポーネントが表示され、/about パスには About コンポーネントが表示されます。

これで、React アプリケーションで React Router v5 を使用する準備が整いました。必要に応じて、さまざまなルートやネストされたルートを設定することもできます。

以上が React Router v5 の基本的なインストールと使用方法です。これにより、React アプリケーションで簡単にルーティングを実装することができます。