React + react-router-dom v6 でURLを設定する ( App.js を編集するだけの最小構成 )

ポイント

BrowserRouter > Routes > Route の入れ子構造にする

インストール

npm install react-router-dom@6

App.js

App.js を以下の内容にする

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

function Hello() {
  return <h2>Hello</h2>;
}

function Home() {
  return <h2>Home</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <h1>Hello React Router v6</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/hello" element={<Hello />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

ブラウザアクセス

/ と hello で表示が変わるのが分かる

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter