Zenn
🎉

react-router-dom v6を使います

2023/07/01に公開
React
初心者
tech

記事を書くきっかけ

Reactアプリケーションでルーティングを実現する際に人気のライブラリであるReact Routerについて基本的なことを学んだのでまとめます。

ゴール

react-router-dom v6の基本的な動きを確認する。

準備

自分で以前に作成したこちらの記事のReactの部分をもとに環境構築をしました。

次のコマンドでreact-router-dom v6をインストールします。

npm install react-router-dom

各ページコンポーネントを作成します。今回はfrontend/app/src/components/pages配下にSignIn.tsx, Home.tsx, Setting.tsxを作成しました。

frontend/app/src/components/pages/SignIn.tsx
import { FC } from "react";

export const SignIn: FC = () => {
  return <p>サインインページです</p>
}
frontend/app/src/components/pages/Home.tsx
import { FC } from "react";

export const Home: FC = () => {
  return <p>ホームページです</p>
}
frontend/app/src/components/pages/Setting.tsx
import { FC } from "react";

export const Setting: FC = () => {
  return <p>設定ページです</p>
}

ルーティング設定

React Routerを使う場合、アプリ全体をBrowserRouterで囲う必要があるのでindex.tsxを編集します。

frontend/app/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

frontend/app/src/router配下にRouter.tsxを作成します。
react-router-dom v6ではRoutes配下にRouteを作成してpathにパスを設定してelementにページコンポーネントを設定することで基本的なルーティングが実現できます。

frontend/app/src/router/Router.tsx
import { FC } from "react";
import { Route, Routes } from "react-router-dom";
import { SignIn } from "../components/pages/SignIn";
import { Home } from "../components/pages/Home";
import { Setting } from "../components/pages/Setting";

export const Router: FC = () => {
  return (
    <Routes>
      <Route path="/" element={<SignIn />} />
      <Route path="/home" element={<Home />} />
      <Route path="/setting" element={<Setting />} />
    </Routes>
  )
}

作成したRouterコンポーネントをApp.tsxで読み込みます。

frontend/app/src/App.tsx
import { Router } from './router/Router';

function App() {
  return (
    <Router />
  );
}

export default App;

ここまでで、設定したURLにアクセスすると各ページコンポーネントの表示に切り替わるようになります。

続いて、存在しないURLにアクセスした場合の設定を行います。

frontend/app/src/components/pages配下にNotFound.tsxを作成します。

frontend/app/src/components/pages/NotFound.tsx
import { FC } from "react";

export const NotFound: FC = () => {
  return <p>ページが存在しないURLです</p>
}

Router.tsxを編集します。
react-router-dom v6ではpathに*を設定することでページが存在しないURLにアクセスしたユーザーにメッセージを表示することができます。

frontend/app/src/router/Router.tsx
import { FC } from "react";
import { Route, Routes } from "react-router-dom";
import { SignIn } from "../components/pages/SignIn";
import { Home } from "../components/pages/Home";
import { Setting } from "../components/pages/Setting";

export const Router: FC = () => {
  return (
    <Routes>
      <Route path="/" element={<SignIn />} />
      <Route path="/home" element={<Home />} />
      <Route path="/setting" element={<Setting />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

ここまでは手動でURLを入力して動作を確認してきたので最後にページ内にリンクを配置します。
App.tsxを次のように編集します。
react-router-domのLinkを読み込んでtoにルーティングを設定します。

frontend/app/src/App.tsx
import { Link } from 'react-router-dom';
import { Router } from './router/Router';

function App() {
  return (
    <>
      <Link to="/">Sign in</Link>
      <Link to="/home">Home</Link>
      <Link to="/setting">Setting</Link>
      <Router />
    </>
  );
}

export default App;

まとめ

react-router-dom v6についてごく基本的な事柄を学ぶことができました。実際にサービスを開発する上ではさらに深い知識が必要になると思いますのでこれからも学習を続ける必要があると思います。

Discussion