1. Routeコンポーネントとは

Routeコンポーネントは、React Routerでルーティングを行うときに使う重要な要素です。

ルーティングとは、URLに応じて表示する画面を切り替える仕組みのことです。

例えば、トップページやお問い合わせページなどを切り替えるときに使われます。

2. Routeの基本的な書き方

Routeは、どのURLでどの画面を表示するかを設定します。


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

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

export default App;

ルートパスにアクセスするとホームという文字が表示されます

pathはURLの場所を意味し、elementは表示する内容を指定します。

3. 複数のRouteを設定する方法

複数のページを作る場合は、Routeを複数並べて書きます。


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

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

これにより、ページごとに違う画面を表示できます。

4. コンポーネントを表示する方法

実際の開発では、HTMLではなくコンポーネントを表示することが多いです。


function Home() {
  return <h1>ホームページ</h1>;
}

function About() {
  return <h1>会社情報</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

ページごとに別のコンポーネントが表示されます

コンポーネントとは、画面の部品のようなものです。