React Routerでルーティング設定を理解する

はじめに

React のルーティングについて学ぶ機会があったので、備忘録として記載します。

今回解説するコード

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { Today } from './pages/Today'
import { AddExercise } from './pages/AddExercise'
import './App.css'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Today />} />
        <Route path="/add" element={<AddExercise />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Router>
  )
}

export default App

そもそも「ルーティング」とは？

「URLに応じて表示する画面を切り替える仕組み」

通常のWebサイトではページ遷移するとリロードが発生しますが、
Reactでは SPA という仕組みで、
ページをリロードせずに画面を切り替えます。

使用しているライブラリ

今回使用しているのは

React Router

Reactでルーティングを実装するための代表的なライブラリです。

---

コード解説

import

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'

• BrowserRouter

  BrowserRouter as Router
  

  ただの別名定義
  長いから短くしてるだけ。
  
  

• Routes
  複数のRouteをまとめる「入れ物」
  
  

• Route
  「URLとコンポーネントの対応表」

ルーティング本体

<Router>
  <Routes>
    <Route path="/" element={<Today />} />
    <Route path="/add" element={<AddExercise />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</Router>

• <Router>
  アプリ全体を包む。
  これがないとルーティングは機能しない。
  
  

• <Route path="/" element={} />
  「URLが / のとき Todayコンポーネントを表示」
  → Today表示
  
  

• <Route path="*" element={<Navigate to="/" replace />} />
  * は「どのパスにも一致しなかった場合」
  　
  

• <Navigate to="/" replace />
  で 「/」に強制リダイレクトされる。