Reactのルーティングについてまとめ

Reactのルーティングは異なるURLに対して異なるコンポーネントを表示するための機能です。

Reactでルーティングを使用するには、React Routerをインストールします。

npm install react-router-dom

次にルーティングに必要なインポート文を記述します。
RouteのpathにURLのパスを指定し、elementにコンポーネント名を指定すれば完了です。

import { BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
import Top from "./Top";
import Login from "./Login";
import Logout from "./Logout";

function Animal() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Top />}></Route>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/logout" element={<Logout />}></Route>
      </Routes>
    </Router>
  );
}