DEV Community

kaede
kaede

Posted on

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

#react #router

Router をインストール 

npm install react-router-dom @types/react-router-dom added 15 packages in 2s
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • BrowserRouter
    • Routes
    • Route / -> Home
    • Route /test -> Test

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

画面

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

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

が描画される。

Top comments (0)