【React.js】React Routerで画面遷移をしてみよう

2023.8.28(Mon)

React Routerの基本

Reactでは、SPA（Single Page Application）の開発が可能ですが、画面遷移に関しては、React Routerライブラリを使用することで、アプリ内に複数ページ（path）を持つWebアプリケーションを作ることができます。

React RouterはReactでのアプリ開発には必須のライブラリですので、早速使い方を学んでいきましょう。

React Routerのインストール

まずは、React Routerをインストールします。

下記コマンドでインストールを行ってください。

//npmの場合
npm install react-router-dom

//yarnの場合
yarn add react-router-dom

これでインストールは完了です。

画面遷移のやり方

早速、画面遷移を実装してみましょう。

まず、ページを4ページほど用意しておきましょう。

今回は、ポートフォリオサイトなどにありそうなページを再現してみます。

Reactのプロジェクトを立ち上げたら、「src」ディレクトリ直下に「components」ディレクトリを作成してください。

その中に下記4つのファイルを作成してください。

◼︎Home.tsx

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

export default Home;

◼︎About.tsx

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

◼︎Works.tsx

const Works = () => {
  return (
    <div>
      <h1>Works</h1>
    </div>
  );
};

export default Access;

◼︎Contact.tsx

const Contact = () => {
  return (
    <div>
      <h1>Contact</h1>
    </div>
  );
};

export default Contact;

ここまでできたら、次はApp.tsxを修正していきます。

このApp.tsxでReact Routerを使用していきます。

App.tsxを下記のように修正してください。

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";

import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Works from "./components/Works";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
        <Link to="/works">Works</Link>
        <br />
        <Link to="/contact">Contact</Link>
        <br />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/works/" element={<Works />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
        {/* <Footer /> */}
      </div>
    </BrowserRouter>
  );
}

export default App;

まず、コード最上部でReact Routerをインポートします。

その際に「BrowserRouter」「Link」「Route」「Routes」をインポートしましょう。

これらはぺーじの表示やリンクに必要なものです。

この中でも「BrowserRouter」は、HTMLのhistory APIを使用して、画面に表示されたページとURLを一致させるものです。

また、作成した4つのページを前もってインポートしておきましょう。

DOM上では、まず全体を<BrowserRouter>タグで囲みます。

各ページへのリンクは<Link>タグで記述します。

aタグでも画面遷移は可能ですが、SPAではLinkタグを使用しましょう。

<Link to="/about">About</Link>

Linkタグはto属性で遷移先ページのパスを記述してください。

そして、<Routes>タグで囲った中に、遷移させる全ページを記述します。

<Route path="/about" element={<About />} />

上記のように記述します。

pathにはページのパスを記述し、elementにはインポートしてきたコンポーネントのタグを記述します。

これでReact Routerが実装できました。

早速、ブラウザで挙動を確認してみましょう。

上記のように、TOPページにHomeが表示されたらOKです。

試しにAboutリンクをクリックしてみましょう。

下記のようにAboutページに遷移されたら成功です。

404 Not Foundページを用意する

React Routerで設定したページ以外にアクセスした場合は、自身で用意した404 Not Foundページを表示させたいと思います。

React Routerでは、Not Foundページも簡単に実装できます。

まず、「components」ディレクトリ内にNotFound.tsxファイルを作成してください。

そして、下記のように記述します。

const NotFound = () => {
  return (
    <div>
      <h1>404 NotFound</h1>
      <p>ページが見つかりませんでした。</p>
    </div>
  );
};

export default NotFound;

そして、App.tsxには下記のように、追記してください。

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";

import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import NotFound from "./components/NotFound"; //追記
import Works from "./components/Works";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
        <Link to="/works">Works</Link>
        <br />
        <Link to="/contact">Contact</Link>
        <br />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/works/" element={<Works />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/*" element={<NotFound />} /> //追記
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Routeタグのpathに「/*」というように設定すると、React Routerで設定したページ以外に飛んだ場合にelement属性で指定したコンポーネントを表示します。

elementには先ほど作成したNot Foundページを設定してください。

これで準備完了です。

試しに「http://localhost:3000/aaa」などと、存在しないページにアクセスしてみてください。

下記のようにNot Foundページが表示されればOKです。

React Routerの応用

続いて、React Routerの応用的な使い方をご紹介します。

パラメーターを付けて画面遷移

React Routerでは、もちろんパラメーター付きで画面遷移させることも可能です。

パラメーターはパスパラメーターとクエリパラメーターの両方で遷移可能です。

パスパラメーター

それでは、まずパスパラメーターからです。

App.tsxを下記のように書き換えてください。

//省略・・・
    <BrowserRouter>
      <div className="App">
        {/* <Header /> */}
        <Link to="/">Home</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
        <Link to="/works/65">Works</Link> //書き換え
        <br />
        <Link to="/contact">Contact</Link>
        <br />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/works/:id" element={<Works />} /> //書き換え
          <Route path="/contact" element={<Contact />} />
          <Route path="/*" element={<NotFound />} />
        </Routes>
        {/* <Footer /> */}
      </div>
    </BrowserRouter>
//省略・・・

パスパラメーターの設定はRouteに行います。

Routeタグのpath属性の中のリンクの末尾にコロン（:）付きで記述します。

今回は、「id」というパラメーターを持たせてみます。

そして、WorksページにリンクさせるLinkタグに適当に「/works/65」といったような値を付けてみました。

これで試してみます。

ブラウザでページを開き、worksリンクをクリックしてみましょう。

下記のように、遷移後のURLにパラメーターが付けばOKです。

また、取得したパラメーターを表示することもできます。

遷移先のWorks.tsxを開いて、下記のように記述してください。

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

const Works = () => {
  const params = useParams();
  return (
    <div>
      <h1>Works</h1>
      <p>{params.id}</p>
    </div>
  );
};

export default Works;

パラメーターを取得するには、useParamsを使います。

useParamsをインポートしましょう。

useParamsで取得した内容を変数「params」に入れておきます。

今回は、シンプルにパラメーターの値を表示させるので、「params.id」と記述して、値を出力します。

下記のようにパラメーターが表示されれば、OKです。

クエリパラメーター

続いて、クエリパラメーターを設定する方法です。

クエリパラメーターはLinkタグでリンクにパラメーターを持たせることができます。

例えば下記の例です。

App.tsxを下記のように書き換えてください。

//省略・・・
    <BrowserRouter>
      <div className="App">
        {/* <Header /> */}
        <Link to="/">Home</Link>
        <br />
        <Link to={{ pathname: "/about", search: "?id=25" }}>About</Link> //書き換え
        <br />
        <Link to="/works/65">Works</Link>
        <br />
        <Link to="/contact">Contact</Link>
        <br />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/works/:id" element={<Works />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/*" element={<NotFound />} />
        </Routes>
        {/* <Footer /> */}
      </div>
    </BrowserRouter>
//省略・・・

クエリパラメーターは上記のようにLinkタグのto属性の内容を書き換えます。

「pathname」には、リンクパスを記述し、「search」にはURLに付けるクエリパラメーターを記述します。

これで下記のように、Aboutページに遷移後にURLの末尾にパラメーターが付いていたら成功です。

また、クエリパラメーターの値を取得するには、useSearchParamsというフックを使います。

下記の例のように取得したパラメーターを表示することも可能です。

「components」ディレクトリ内のAbout.tsxに下記のように追記、書き換えしてください。

import { useNavigate, useSearchParams } from "react-router-dom"; //書き換え

const About = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams(); //追記
  const redirect = () => {
    alert("この後、Contactページにリダイレクトします。");
    navigate("/contact");
  };
  return (
    <div>
      <h1>About</h1>
      <p>{searchParams.get("id")}</p> //追記
      <button onClick={redirect}>Click</button>
    </div>
  );
};

export default About;

useSearchParamsを使い、「get()」で引数にパラメーターを指定することで値を取得できます。

「getAll()」を使うと、すべてのクエリパラメーターの値を取得できます。

下記のようにクエリパラメーターの値が表示されればOKです。

リダイレクトをかける

続いては、リダイレクトをかける方法について、ご紹介します。

リダイレクトをかけるには、useNavigateを使用します。

次の例は、何らかの処理の後にリダイレクトをかけるものになります。

今回は、ボタンクリック後にリダイレクトをかけてみましょう。

About.tsxを開いて下記のように記述してください。

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

const About = () => {
  const navigate = useNavigate();
  const redirect = () => {
    alert("この後、Contactページにリダイレクトします。");
    navigate("/contact");
  };
  return (
    <div>
      <h1>About</h1>
      <button onClick={redirect}>Click</button>
    </div>
  );
};

export default About;

まず、useNavigateを使用するので、これをインポートしておきましょう。

useNavigateの内容を変数「navigate」に入れます。

これで「navigate(“リダイレクト先パス”)」のように記述することで、リダイレクトをかけることができます。

今回は、Aboutページにボタンを設置し、ボタンクリックでアラートを出した後で、Contactページへリダイレクトさせています。

ブラウザで挙動を確認してみましょう。

下記のようにAboutページにアクセスすると「Click」というボタンが設置されています。

これをクリックしてみてください。

下記のようにアラートが表示されます。

この後に、Contactページへリダイレクトされれば、成功です。

useLocation

続いては、useLocationについてです。

React Routerでは、このuseLocationを使うことで、現ページのパスを取得することが可能です。

下記は、ヘッダーコンポーネントを作り、ヘッダーに表示ページのパスを表示される例です。

「components」ディレクトリにHeader.tsxファイルを作成してください。

このファイルに下記のように記述してください。

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

const Header = () => {
  const location = useLocation();
  return (
    <header>
      <p>現在のページのパスは {location.pathname} です。</p>
    </header>
  );
};

export default Header;

useLocationをインポートして、useLocationの内容を変数「location」に入れます。

そして、現在のページのパスは「location.pathname」で取得することが可能です。

また、App.tsxにて、このHeaderコンポーネントを呼び出します。

//省略・・・
import Header from "./components/Header";　//追記

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />　//追記
        <Link to="/">Home</Link>
        <br />
//省略・・・

上記例をブラウザで見てみると、下記のように、表示ページのパスが表示されます。

このuseLocationを使った、パスの取得は、例えばページ毎の出しわけで、異なるクラスやスタイルを付けたい時だったり、ページごとに表示する要素を出し分けるなどの時に使えると思います。

最後に

いかがだったでしょうか。

今回は、React Routerを使ったReactにおける画面遷移の方法についてご紹介いたしました。

React RouterはReactアプリケーションにおける必須のライブラリですので、是非使いこなしたいところです。

【React.js】React.jsとは？環境構築やHello World表示までをご紹介
https://www.dailyupblog.com/web_development/1830/

【React.js】React.jsにおけるコンポーネントとpropsの使い方をご紹介！
https://www.dailyupblog.com/web_development/1860/

【React.js】useStateとuseEffectの使い方をご紹介（React hooksを学ぶ）
https://www.dailyupblog.com/web_development/1888/

Web開発

【React.js】React.jsにおけるコンポーネントと……
2023.4.20
Web開発

【React.js】useCallbackとuseMemoの……
2023.6.14
バックエンド開発

【Node.js + Express】リクエストからパラメー……
2021.9.28
Web開発

【Vue + Nuxt.js】Nuxt.jsのルーティングの……
2021.7.14
Web開発

【React.js】CSS-in-JSを使ったスタイリング（……
2023.9.12
Web開発

【React.js】useStateとuseEffectの使……
2023.5.2
Web開発

【React.js】useTransitionとuseIdの……
2023.8.7
Web開発

【React.js】Reduxを使ってstate（状態）を一……
2024.8.11
Web開発

【Vue + vue-cli】vue-routerでパラメー……
2021.7.8
Web開発

【React.js】useLayoutEffectとuseD……
2023.8.1
Web開発

【React.js】useContextとuseReduce……
2023.6.5
Web開発

【React.js】useRefとuseImperative……
2023.6.22
Web開発

【React.js】React.jsとは？環境構築やHell……
2023.4.12

Web開発

【Vue + vue-cli】vue-r……

2021.7.8

Web開発

【React.js】useLayoutE……

2023.8.1

Web開発

【React.js】useTransit……

2023.8.7

【React.js】React Routerで画面遷移をしてみよう

目次

React Routerの基本

React Routerのインストール

画面遷移のやり方

404 Not Foundページを用意する

React Routerの応用

パラメーターを付けて画面遷移

パスパラメーター

クエリパラメーター

リダイレクトをかける

useLocation

最後に

【React.js】React.jsにおけるコンポーネントと……

【React.js】useCallbackとuseMemoの……

【Node.js + Express】リクエストからパラメー……

【Vue + Nuxt.js】Nuxt.jsのルーティングの……

【React.js】CSS-in-JSを使ったスタイリング（……

【React.js】useStateとuseEffectの使……

【React.js】useTransitionとuseIdの……

【React.js】Reduxを使ってstate（状態）を一……

【Vue + vue-cli】vue-routerでパラメー……

【React.js】useLayoutEffectとuseD……

【React.js】useContextとuseReduce……

【React.js】useRefとuseImperative……

【React.js】React.jsとは？環境構築やHell……

【Vue + vue-cli】vue-r……

【React.js】useLayoutE……

【React.js】useTransit……