【React 】React Routerを利用したルーティング設定の基礎

React Routerとは？

React Routerは、Reactアプリケーションでルーティングを実現するためのライブラリです。React Routerを使用すると、ユーザーがアプリケーション内を移動したときに、アプリケーションが適切なコンポーネントをレンダリングすることができます。

ページ毎に異なるコンポーネントで構成されているためURLとコンポーネントを紐づける仕組みが必要となります。その役割を担うのがReact Routerです。

React Routerのメリット

１、シングルページアプリケーション（SPA）の実現
２、コンポーネントベースのルーティング
３、履歴の管理
４、拡張性

１、シングルページアプリケーション（SPA）の実現

React Routerは、Reactアプリケーション内でルーティングを管理することで、SPAの実現が容易になります。React Routerを使用すると、ページの再読み込みが発生せずに、アプリケーション内をスムーズに移動することができます。

２、コンポーネントベースのルーティング

React Routerは、コンポーネントベースのルーティングを提供するため、Reactアプリケーションの開発をより柔軟にすることができます。React Routerを使用することで、URLパスに基づいて特定のコンポーネントをレンダリングすることができます。

３、履歴の管理

React Routerは、ブラウザ履歴を管理することができます。これにより、ユーザーが戻る/進むボタンを使用して、ページの履歴を辿ることができます。

４、拡張性

React Routerは、プラグインアーキテクチャを採用しており、拡張性が高いことが特徴です。React Routerには、多数のコミュニティ製のプラグインが存在し、これらを使用することで、Reactアプリケーションの開発をより簡単にすることができます。

React Routerの主なコンポーネント

React Routerには、次の4つの主要なコンポーネントがあります。

1. <BrowserRouter>
2. React Routerアプリケーションのルートとして使用することができるコンポーネントです。通常、これはアプリケーションの最上位に配置されます。
3. <Link>：リンクを提供し、ユーザーが別のURLに移動できるようにします。
4. <Switch>：複数の<Route>コンポーネントを包含することができ、URLパスに一致する最初のルートだけをレンダリングすることができます。<Switch>コンポーネントは、ルートの優先順位を決定するために使用されます。
5. <Route>：URLパスに一致する場合にレンダリングするコンポーネントを定義するために使用されます。

React Routerを使用したルーティング設定

import React from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
        <Link to="/contact">Contact</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export const Home = () => {
  return (
    <div>
      <h1>Homeです</h1>
    </div>
  );
};

export const About = () => {
  return (
    <div>
      <h1>Aboutページです</h1>
    </div>
  );
};

export const Contact = () => {
  return (
    <div>
      <h1>Contactページです</h1>
    </div>
  );
};