1. React Routerとは何か

React Routerとは、Reactアプリで画面を切り替えるためのライブラリです。ライブラリとは便利な機能をまとめたツールのことです。

通常のウェブサイトではページを移動すると全体が再読み込みされますが、Reactでは必要な部分だけを切り替えます。

この仕組みによって、動きの速いアプリを作ることができます。

2. 事前に準備するもの

React Routerを使うには、Reactアプリが必要です。Reactアプリとは、Reactで作られたウェブアプリのことです。

まだ作成していない場合は、事前にReactの開発環境を用意しておきます。

環境とは、プログラムを動かすための準備のことです。

3. React Routerのインストール方法

まずはReact Routerをインストールします。インストールとは、必要な機能を追加する作業のことです。


npm install react-router-dom

コマンドを実行するとReact Routerがプロジェクトに追加されます

npmはパッケージを管理する仕組みで、ライブラリを簡単に追加できます。

4. BrowserRouterを設定する

次に、アプリ全体をBrowserRouterで囲みます。これによりルーティングが使えるようになります。


import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <h1>アプリ開始</h1>
    </BrowserRouter>
  );
}

export default App;

アプリ全体がルーティング対応になり画面切り替えができる状態になります

BrowserRouterはルーティングの土台となる重要な機能です。

5. RoutesとRouteを設定する

画面ごとのルールを設定するためにRoutesとRouteを使います。


import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1>ホーム</h1>} />
        <Route path="/about" element={<h1>会社情報</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

URLに応じて表示される内容が切り替わります

RouteはどのURLでどの画面を表示するかを決める設定です。

6. Linkで画面移動を実装する

ユーザーがクリックして画面を切り替えるにはLinkを使います。


import { Link } from "react-router-dom";

function Menu() {
  return (
    <div>
      <Link to="/">ホーム</Link>
      <Link to="/about">会社情報</Link>
    </div>
  );
}

リンクをクリックするとページが切り替わります

Linkは通常のリンクと違い、ページを再読み込みせずに移動します。