如何使用 react-router v6 在组件内传递道具

Question

我正在努力通过 react-rouer v6

在组件之间传递道具

这是 App.tsx 中的路由，我想从组件 (Home) 传递道具，重定向到这个 (EditUser)

<Routes>
    <Route path={ROUTES.HOME} element={<Home />} />
    <Route path={ROUTES.EDIT_USER} element={<EditUser props />} />
</Routes>

主页有一些功能可以呈现 table 与用户

这是导航到 EditUser 页面以便能够编辑的函数
单击“编辑”按钮后，我希望能够通过其中一位用户 （我添加了状态，因为我读到这是从“编辑用户”页面访问的方式）

  const handleEdit = (user: IUser) => {
    navigate(ROUTES.EDIT_USER, {
      state: {
        user,
      },
    });
  };

编辑按钮（重定向有效这只是从组件传递该用户的事实）

<EditButton
   data-testid={`edit-button-${user.id}`}
   text={ES.common.edit}
   onClick={() => {
      handleEdit(user);
   }}
   ></EditButton>

有什么想法吗？

一如既往，谢谢！

Answer 1

当您在路由转换中发送状态时，它不是通过 props 发送的，而是通过路由上下文发送的。在 EditUser 组件中，您可以通过从 useLocation 挂钩返回的 location 对象访问发送的路由状态。

示例：

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

...

const location = useLocation();
const { state } = location;
const { user } = state || {};

How to pass props within components with react-router v6