【React】ルーティングする【react-router-dom】

Reactでreact-router-domを使ってルーティングしたい！

概要

今回の記事では、Reactでreact-router-domを使ってルーティングする手順を掲載する。

仕様書

環境

• node v21.1.0
• npm 10.8.1
• react 18.3.1
• react-dom 18.3.1
• react-router-dom 6.24.1

手順書

インストール編とルーティング編の2部構成です。

インストール編

プロジェクトにreact-app-rewiredをインストールする。

npm install --save react-router-dom

ルーティング編

index.tsxにルーティングの設定をする例。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, Routes, BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path={"/"} element={<div>index!</div>} />
                <Route path={"/login"} element={<div>login!</div>} />
                <Route path={"/logout"} element={<div>logout!</div>} />
                <Route path={"/privacy"} element={<div>privacy!</div>} />
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

reportWebVitals();

<BrowserRouter>の中の<Routes>の中にルーティングの設定毎に<Route>を配置する。

上記の設定ではURLがhttp://example.comだとするとpathの設定によって/はhttp://example.com、/loginはhttp://example.com/login、/logoutはhttp://example.com/logout、/privacyはhttp://example.com/privacyに対応する。対応したURLにアクセスすると対応したelelemtが表示される。

まとめ（感想文）

ASP .NET Coreの中でReactを動かしてる場合は、react-router-domがうまく動かないので注意。