学習中でReact Router v5→v7の変更に困った話【基本的なページ遷移】

はじめに

現在、エンジニアを目指して就活している初心者学生です。
Udemyの講座「React に入門した人のためのもっと React が楽しくなるステップアップコース完全版」でReactのWeb開発を学んでいるのですが、この講座自体が結構古く使用している技術のバージョンが現在とは離れてしまってます。古いバージョンで学習しても今後のことを考えると不便になると考えたため、自分で調べながら新しいバージョンで実装を進めて行く形を取ることにしました。
今回、最初にバージョンの壁に当たったReact-Routerについて説明していきます。

注意事項

今回は、講義動画のv5と2025年11月現在のv7の書き方の違いについて、講義内のコードをお借りしながら説明していきます。
実際のUdemyの講座の順番に沿って説明していくため、はじめに講義を視聴しv5ではあるもののある程度の基本知識をインプットした上で、こちらを読んでいただくとスムーズかと思います。
また、初心者が書いているため誤った内容があるかもしれません。その際には、コメント等で教えていただけると幸いです。

基本的なページ遷移

まず、ルーティングのはじめの講義である「基本的なページ遷移」から説明していきます。このセクションで行いたいことは、あるパスが指定されたときに好きなコンポーネントをレンダリングできることです。今回の例だと、Homeという画面上の文字をクリックするとあらかじめ用意していた、Homeコンポーネントをレンダリングするという感じです。

v5の書き方

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
import { Home } from "./Home";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";
import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
      </div>

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

v7の書き方

Linkコンポーネントについてはv5と変更はなく、主にv5の書き方のSwitchコンポーネントから変更があります

• Switch
  廃止になり、Routesコンポーネントに変更されました
• Route
  exactが廃止され標準で完全一致になりました。
  また、レンダリングしたいコンポーネントをRouteでネストする必要がなくなり (ネストもできる)、Routeタグ内でelementというプロパティを渡すことで、pathで指定したパスにレンダリングされるコンポーネントを指定できるようになりました。
  <Route path="/" element={<Home />} /> は、パスが/のときにHomeコンポーネントをレンダリングするという意味です。

<BrowserRouter>
    <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
    </div>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
    </Routes>
</BrowserRouter>

さいごに

今回は、「基本的なページ遷移」について説明しました。
v7では、v5と異なり行数を削減して書くことができるようになったと思います。
次回は、「ネストされたページ遷移」について説明します！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼