【React】react-router-domライブラリを使用したルーティングの設定｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでルーティングを設定するまでの手順
3 Reactの画面遷移で使用するコンポーネント
- 3.1 Reactのルーティングで404を設定
4 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10

Reactでルーティングを設定するまでの手順

Reactアプリケーションでルーティングを設定するまでの手順は、以下の手順を実行する必要があります。

react-router-domライブラリのインストール

まずはreact-router-domライブラリのパッケージを以下のコマンドでインストールします。

npm install react-router-dom

1	npm install react-router-dom

今回は最新バージョンであるV6をインストールします。

react-router-domのBrowserRouteで全体をラップする

次にreact-router-domライブラリのBrowserRouterコンポーネントを使用し、アプリケーション全体をラップします。

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();

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>

<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();

このコンポーネントは、HTML5履歴APIを使用してURLを制御します。

また、「BrowserRouter」は、Reactプロジェクトの中で一度しか使えません。

react-router-domでルーティングを設定

次にreact-router-domでルーティングの画面遷移を設定します。

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

import Top from "./pages/homes/top";
import Profile from "./pages/homes/profile";
import Skill from "./pages/homes/skill";
import Production from "./pages/homes/production";
import Contact from "./pages/homes/contact";
import Blog from "./pages/homes/blog";
import NoMatch from "./pages/nomatch";

const App: React.FC = () => {
  return(
    <>
      <h1>ポートフォリオサイト</h1>
      <ul>
        <li><Link to="/">Top</Link></li>
        <li><Link to="/profile">Profile</Link></li>
        <li><Link to="/skill">Skill</Link></li>
        <li><Link to="/production">Production</Link></li>
        <li><Link to="/contact">Contact</Link></li>
        <li><Link to="/blog">Blog</Link></li>
      </ul>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/skill" element={<Skill />} />
        <Route path="/production" element={<Production />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
      <h2>フッター</h2>
    </>
  );
};

export default App;

import React from "react";

import { Routes, Route, Link } from "react-router-dom";

import Top from "./pages/homes/top";

import Profile from "./pages/homes/profile";

import Skill from "./pages/homes/skill";

import Production from "./pages/homes/production";

import Contact from "./pages/homes/contact";

import Blog from "./pages/homes/blog";

import NoMatch from "./pages/nomatch";

const App: React.FC = () => {

return(

<h1>ポートフォリオサイト</h1>

<ul>

<li><Link to="/profile">Profile</Link></li>

<li><Link to="/skill">Skill</Link></li>

<li><Link to="/production">Production</Link></li>

<li><Link to="/contact">Contact</Link></li>

</ul>

</Routes>

</>

);

};

export default App;

react-router-domのV5までは「Switch」を使用していましたが、V6からは「Routes」を使用して各ルートのコンポーネントを設定します。

「Routes」コンポーネントは子である「Routes」コンポーネントを検証し、URLパスに一致する最初のコンポーネントだけをレンダリングします。

Reactの画面遷移で使用するコンポーネント

次にReactの画面遷移で使用するコンポーネントを作成していきます。

import React from "react";

const Top: React.FC = () => {
    return(
        <>
            <h2>トップページ</h2>
        </>
    );
};

export default Top;

import React from "react";

const Top: React.FC = () => {

return(

<h2>トップページ</h2>

</>

);

};

export default Top;

srcのpagesのフォルダ内にhomesというフォルダを作成し、トップページ用の「top.tsx」ファイルを作成しています。

今回はにファイルを作成しているだけですが、ご参考のために各ファイルのコードを記載しておきます。

import React from "react";

const Profile: React.FC = () => {
    return(
        <>
            <h2>プロフィールページ</h2>
        </>
    );
};

export default Profile;

import React from "react";

const Profile: React.FC = () => {

return(

<h2>プロフィールページ</h2>

</>

);

};

export default Profile;

import React from "react";

const Skill: React.FC = () => {
    return(
        <>
            <h2>開発スキルページ</h2>
        </>
    );
};

export default Skill;

import React from "react";

const Skill: React.FC = () => {

return(

<h2>開発スキルページ</h2>

</>

);

};

export default Skill;

import React from "react";

const Production: React.FC = () => {
    return(
        <>
            <h2>制作物ページ</h2>
        </>
    );
};

export default Production;

import React from "react";

const Production: React.FC = () => {

return(

<h2>制作物ページ</h2>

</>

);

};

export default Production;

import React from "react";

const Contact: React.FC = () => {
    return(
        <>
            <h2>お問い合わせページ</h2>
        </>
    );
};

export default Contact;

import React from "react";

const Contact: React.FC = () => {

return(

<h2>お問い合わせページ</h2>

</>

);

};

export default Contact;

import React from "react";

const Blog: React.FC = () => {
    return(
        <>
            <h2>ブログページ</h2>
        </>
    );
};

export default Blog;

import React from "react";

const Blog: React.FC = () => {

return(

<h2>ブログページ</h2>

</>

);

};

export default Blog;

私はブログを運営しているため、とりあずはブログのコンポーネントも作成しています。

Reactのルーティングで404を設定

次にReactのルーティングで404を設定していきます。

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

import Top from "./pages/homes/top";
import Profile from "./pages/homes/profile";
import Skill from "./pages/homes/skill";
import Production from "./pages/homes/production";
import Contact from "./pages/homes/contact";
import Blog from "./pages/homes/blog";
import NoMatch from "./pages/nomatch";

const App: React.FC = () => {
  return(
    <>
      <h1>ポートフォリオサイト</h1>
      <ul>
        <li><Link to="/">Top</Link></li>
        <li><Link to="/profile">Profile</Link></li>
        <li><Link to="/skill">Skill</Link></li>
        <li><Link to="/production">Production</Link></li>
        <li><Link to="/contact">Contact</Link></li>
        <li><Link to="/blog">Blog</Link></li>
      </ul>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/skill" element={<Skill />} />
        <Route path="/production" element={<Production />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
      <h2>フッター</h2>
    </>
  );
};

export default App;

import React from "react";

import { Routes, Route, Link } from "react-router-dom";

import Top from "./pages/homes/top";

import Profile from "./pages/homes/profile";

import Skill from "./pages/homes/skill";

import Production from "./pages/homes/production";

import Contact from "./pages/homes/contact";

import Blog from "./pages/homes/blog";

import NoMatch from "./pages/nomatch";

const App: React.FC = () => {

return(

<h1>ポートフォリオサイト</h1>

<ul>

<li><Link to="/profile">Profile</Link></li>

<li><Link to="/skill">Skill</Link></li>

<li><Link to="/production">Production</Link></li>

<li><Link to="/contact">Contact</Link></li>

</ul>

</Routes>

</>

);

};

export default App;

31行目の記載が、どのURLにも該当しない場合にNoMatchというコンポーネントを返すというルーティング設定になります。

import React from "react";

const NoMatch: React.FC = () => {
    return(
        <>
            <h2>ページが見つかりませんでした。</h2>
        </>
    );
};

export default NoMatch;

import React from "react";

const NoMatch: React.FC = () => {

return(

<h2>ページが見つかりませんでした。</h2>

</>

);

};

export default NoMatch;

上記はどのURLにも該当しない場合に返すコンポーネントなので、「ページが見つかりませんでした」という内容を返すコンポーネントです。

以上でReactの基本的なルーティング設定は完了です。

おわりに

Reactでルーティングの設定をするための手順を解説してきましたが、いかがだったでしょうか。

react-router-domのパッケージを使用すれば、簡単にルーティングを設定して効率よく画面偏移をすることができるのが、SPAの利点でもあります。

是非、モダンなフロントエンド開発の定番となりつつあるReactを使っていきましょう。