React Router v6 でページ遷移で props を渡す

初めに

react router v6 で props の渡し方について調べました。

以下に記載があります。

例

例を作りました。

App.js

import "./styles.css";
import { useState } from "react";
import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";

const Count = (props) => {
  // props を受け取る
  const { count, setCount } = props;
  return (
    <div>
      <h3>Click this button</h3>
      <button onClick={() => setCount(count + 1)}>Click</button>
      <h6>COUNT is {count}</h6>
    </div>
  );
};

const Home = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home</h1>
      <button onClick={() => navigate("countpage")}>Go to count page</button>
    </div>
  );
};

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/countpage"
            // prors を渡す
            element={<Count count={count} setCount={setCount} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

参考記事