11.2. React Routerのセットアップ

はじめにこのセクションでは、ReactアプリケーションでReact Routerを設定する方法を学びます。GeekとGalが、初心者から上級者まで分かりやすく楽しくプロセスを案内してくれます！

React Routerについては学んだけど、アプリにどう設定するの？

うん、どうやって動かすのか知りたい！

大丈夫！一緒に手順を見ていこうね！

ステップ1: React Routerのインストール

まず、 react-router-dom パッケージをインストールする必要があるの。プロジェクトディレクトリでこのコマンドを実行してね：

npm install react-router-dom

簡単だね！次は何？

ステップ2: コンポーネントのインポート

さて、 react-router-dom から必要なコンポーネントをインポートしよう。 BrowserRouter 、 Route 、 Link などだよ！

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

ステップ3: ルートの設定

コンポーネントをインポートしたら、 Router 、 Route 、 Link コンポーネントを使ってルートを設定しよう。

それだけ？まるで魔法みたいだね！

そうなの！超簡単だよ！例を見てみて：

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 Routerの設定はとっても簡単！次の手順に従ってください：react-router-domパッケージをインストールし、必要なコンポーネントをインポートし、BrowserRouter、Route、Linkを使ってルートを設定するだけです。これで、Reactアプリでダイナミックで柔軟なルーティングをプロのように作成できるようになります！🚀