Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【React.js】React Routerで画面遷移をしてみよう

Web開発

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

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

目次

  1. React Routerの基本
    1. React Routerのインストール
    2. 画面遷移のやり方
    3. 404 Not Foundページを用意する
  2. React Routerの応用
    1. パラメーターを付けて画面遷移
    2. リダイレクトをかける
    3. useLocation
  3. 最後に

今回は、React.jsにてReact Routerを使った画面遷移をする方法をご紹介しようと思います。

当ブログでは、筆者が勉強中のReact.jsについて、アウトプットの場として、学んだことを記事にしています。

今まで投稿したReact.jsに関する記事は下記になりますので、是非こちらも合わせてご覧ください。

【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/

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/

関連記事

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

  • 【React.js】useStateとuseEffectの使

    【React.js】useCallbackとuseMemoの……

  • 【React.js】useCallbackとuseMemoの

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

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

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

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

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

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

    【React.js】useContextとuseReduce……

  • 【React.js】useContextとuseReduce

    【React.js】useLayoutEffectとuseD……

  • 【React.js】useLayoutEffectとuseD

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

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

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

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

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

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

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

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

    【React.js】useRefとuseImperative……

  • 【React.js】useRefとuseImperative

    【React.js】useTransitionとuseIdの……

関連記事