11. React Router

はじめに React Routerを探検しましょう！React Routerは、Reactアプリでのナビゲーションを扱うための強力なライブラリです。GeekとGalが、面白おかしいインタラクションでルーティングを楽にする方法を見ていきましょう。

React Routerでアプリのダイナミックなナビゲーションができるよね！

便利そう！どうやって始めるの？

まず、 react-router-dom パッケージをインストールする必要があるわ。それから、アプリにルートを追加していくの！

React Routerのインストール

react-router-dom をインストールするには、次のコマンドを実行するだけよ：

npm install react-router-dom

基本的なルーティング

インストールが終わったら、 BrowserRouter 、 Route 、 Link コンポーネントを使ってルートを作成できるわ！

それだけ？もっと複雑だと思ってた！

いいえ！React Routerがめちゃくちゃ簡単にしてくれるの！基本的な例を見てみましょう：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">ホーム</Link>
          </li>
          <li>
            <Link to="/about">アバウト</Link>
          </li>
        </ul>
      </nav>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

なるほど、 Router でアプリをラップして、 Link でナビゲーションを行い、 Route で適切なコンポーネントをレンダリングするんだね！

その通り！そして、アプリに必要なだけルートを作成できるのよ！

おわりに React Routerは、Reactアプリでのナビゲーションを簡単に扱えるようにしてくれます！react-router-domパッケージを使って、BrowserRouter、Route、Linkコンポーネントを使ってダイナミックで柔軟なルーティングを作成できます。これで、Reactアプリで素晴らしいナビゲーションを構築する準備が整いました！😃