【React】ルーティングをシンプルに設定する方法(react-router-dom)

2022年12月12日React

Reactでルーティングをシンプルに設定する方法を紹介します。

Reactでルーティングをシンプルに設定する方法

手順1:react-router-domをインストール

#npmの場合
npm i react-router-dom

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

ルーティングの設定をシンプルにすることができるreact-router-domをインストールします。
react-router-domを使うことで、ブラウザによるページ遷移を行うことなく、リロードされることなく、単一のWebページでコンテンツ切り替えが可能になります。

手順2:BrowserRouter, Routes,Routeをインポート(コンポーネントごとのページ遷移)

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

react-router-domから、BrowserRouter, Routes,Routeをインポートします。
BrowserRouterが長い名前なので、as Routerとすると、Routerとして使うことができます。

手順3:JSXで記述(コンポーネントでページ遷移)

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route
          path="/create"
          element={<CreatePost isAuth={isAuth} />}
        ></Route>
        <Route path="/login" element={<Login setIsAuth={setIsAuth} />}></Route>
        <Route path="/logout" element={<Logout setIsAuth={setIsAuth} />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

上のようにして、Router(BrowserRouter)コンポーネントの中にRoutesコンポーネントを入れて、その中にRouteコンポーネントをいれます。
Routeコンポーネントのpath属性に設定した値が実際のパスになります。
element属性にコンポーネントを渡すことで、path属性に設定したパスとelement属性のコンポーネントが紐づくことになります。

ページ内の更新が必要な箇所のみ更新するLinkコンポーネント

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

  const Navbar = ({ isAuth }) => {
    return (
      <nav>
        <Link to="/">
          ホーム
        </Link>
        {/* ログインとログアウトを切り替え */}
        {!isAuth ? (
          <Link to="/login">
            ログイン
          </Link>
        ) : (
          <>
            <Link to="/create">
              記事投稿
            </Link>
            <Link to="/logout">
              ログアウト
            </Link>
          </>
        )}
      </nav>
    );
  };

  export default Navbar;

Linkコンポーネントを使うと、aタグのようにページ全体をリロードするのではなく、必要な部分だけを再レンダリングさせることができます。
to属性にパスを指定するので、aタグみたいに使うことができます。