如何使用 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>

主页有一些功能来呈现一个包含用户的表格

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

  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

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

例子：

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

...

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