爆速で説明するreact-routerの使い方

目的

自分が読んだreactの最近の参考書にはreact-routerの使い方の説明が一切書かれていなかったため、公式ドキュメントを参考にして備忘録として使い方を記す。

実践

index.jsx(ts使うならtsx)に下記のように記載する。

各コンポーネント、ファイルの置き場所をsrc/routes,src/components配下としたが、これは特に定められているわけではないので場合によってはもっとネストさせたディレクトリの下などから呼ぶこともあるだろう。

index.jsx

結局index.jsxを"root"にレンダリングするため、全てのRouteをindex.jsxに記載する。
HeaderやFooterなどの固定するものはどこのページでも表示するため、内外に記載する。

<Route path="/" element={<Home />} />では、URLを例えばhttp://localhost:3000/とすれば、コンポーネントが表示されるということ。

index.jsx

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import { Works } from "./routes/works";
import { Contact } from "./routes/contact";
import { Home } from "./routes/home";
import { Career } from "./routes/career";
import { Footer } from "./components/footer";
import { Header } from "./components/header";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Header />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="career" element={<Career />} />
      <Route path="works" element={<Works />} />
      <Route path="contact" element={<Contact />} />
    </Routes>
    <Footer />
  </BrowserRouter>,
  rootElement
);

header.jsx

ここでは<Route path="/" element={<Home />} />の場合はのtoにpathを記載する。

header.jsx

import { Link } from "react-router-dom";
export const Header = () => {
  return (
    <>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem"
        }}
      >
        <Link to="/">Home</Link>
        <Link to="/career">Career</Link>
        <Link to="/works">Works</Link>
        <Link to="/contact">Contact</Link>
      </nav>
    </>
  );
}

参考

なんだかんだ公式が一番わかりやすいです。