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 で挟む
画面
これによって、ブラウザでは
- / (root) では Home
-
- /test では Test
-
が描画される。
Top comments (0)