React 基礎 Part 01 -- URL に応じて Router でコンポーネントを出し分ける

Router をインストール

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

added 15 packages in 2s

react-router-dom と その types をインストール

---

App で Router で コンポーネントを出し分ける

App.tsx

import './App.css';
import {
  BrowserRouter,
  Route,
  Routes,
} from "react-router-dom"


const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element= { <Home/>} />
        <Route path="/test" element= { <Test/>} />
      </Routes>
    </BrowserRouter>

  );
}
export const Home = () => <h2>Home</h2>
export const Test = () => <h2>Test</h2>

export default App;

• BrowserRouter
  • Routes
  • Route / -> Home
  • Route /test -> Test

このように Route を、Routes と BrowserRouter で挟む

---

画面

これによって、ブラウザでは

1. / (root) では Home
   • 
2. /test では Test
   • 

が描画される。