[備忘録] React v6 のルーティングについて

Reactアプリ内のルーティングをメモ

React V6は、V5からルーティングの仕方が結構変わったので、いつもどっちのコンポーネントを使うんだったか迷うので、ここに備忘録。

本体モジュールとは別セットなので、react-router-domをインストール

Terminal

npm install react-router-dom

App.jsxにルーティング用コードを書く

JSX

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

// Import page components
import Home from './Home';
import About from './About';
import Contact from './Contact';

// Import components that should appear on every page
import Header from './Header';
import Footer from './Footer';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      {/* Define routes for each pages */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>

      <Footer />
      
    </BrowserRouter>
  );
}

export default App;

全体のUIツリーはBrowserRouterに入れて、パスによってスイッチするコンポーネントはRoutes内に入れる。
＊BrowserRouterは、一種のcontext providerで、ルーティングの為のプロパティを子要素に提供している。