Tweet

Pocket

ReactはSPA（シングルページアプリケーション）のため、
特定のURLにアクセスしたら、そのURLの中で画面遷移される動きになります。
ただ、外部のサイトから特定のページへダイレクトにURLで移動したい時などもあります。
そのとき利用するRouter機能をメモ

準備

今回、利用するRoter機能は「react-router-dom」になります。
まずは以下の手順でインストールします。
※React＋Typescriptの環境

npm install react-router-dom @types/react-router-dom

利用方法

index.tsx の記述内容

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Login from './Login';
import Home from './Home';
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={<App />} />
        <Route path='/login' element={<Login />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

解説

import { Route, Routes, BrowserRouter } from 'react-router-dom';

利用するコンポーネントをimportしています。

<BrowserRouter>
    <Routes>
        <Route path='/' element={<App />} />
    </Routes>
</BrowserRouter>

BrowserRouter, Routesで囲みRouteを指定します。
Routeはアクセス先に合わせて複数記述が可能です。

Routeでは以下を指定します。
path : 指定して欲しいURLを相対パスで記述します。
element : URLに対して返却する要素を記述します。上記例ではAPPコンポーネントの返却値が記述されます。

関連記事 :

[React] 導入バージョンの確認