11.1. React Routerへの導入

はじめに今日は、React Routerについて学びましょう！React Routerは、Reactアプリでのナビゲーションを扱う強力なライブラリです。GeekとGalと一緒に、初心者から上級者までわかりやすい形でReact Routerの基本を楽しく探検しましょう。

React Routerって、Reactアプリでダイナミックなナビゲーションを作るのにめちゃ便利なんだよね！

それってすごくいいね！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="/">Home</Link>
          </li>
          <li>
            <Link to="/about">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アプリで素晴らしいナビゲーションを構築する準備が整いました！😃