【React Router v6】遷移先に値を渡す方法

React Router v6 で遷移先に値を渡す方法のメモです。

環境

• React: v17.0.2
• Typescript: v4.6.2
• react-router-dom: v6.2.2

ルーティング

App.tsx

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="about" element={<About />} />
    </Routes>
  );
}

export default App;

遷移元のコンポーネント

<Link>のstateプロパティに遷移先に渡したい値をセットします。

Home.tsx

import { Link } from "react-router-dom";

export default () => {
  return (
    <>
      <Link to={"/about"} state={{ test: "test" }}>
        About
      </Link>
    </>
  );
};

遷移先のコンポーネント

About.tsx

import { useLocation } from "react-router-dom";

interface State {
  test: string;
}

export default () => {
  const location = useLocation();
  const { test } = location.state as State;

  return <div>{test}</div>;
};

ちなみに、React Router v5ではこのように👇型を書けましたが、これだとv6ではtypeエラーになってしまうようです。

const location = useLocation<{ test: string }>();

参考

https://github.com/reach/router/issues/414