javascript - 如何使用 React-router-dom 版本 6 useNavigate 和 typescript 传递参数

Question

我正在尝试发送变量 id在 react-router-dom 版本 6 中使用 useNavigate 到另一个页面。这是我正在尝试的:

const handleSelect = (id: number) => {
    navigate('/Players', {
      userId: id,
    });
  };

但是我收到错误: Argument of type '{ userId: number; }' is not assignable to parameter of type 'NavigateOptions'. Object literal may only specify known properties, and 'userId' does not exist in type 'NavigateOptions'.ts(2345)我找不到有关 NavigateOptions 或它正在寻找什么类型的任何有用信息。如果我删除参数 userId然后我可以导航到 Player页就好了。这只是导致问题的参数。对于这个问题我能做些什么？有人可以提供一些文件吗？
NavigateOptions 类型的参数的示例是什么？

Answer 1

您的意思是向导航添加状态吗？
原来的:

const handleSelect = (id: number) => {
    navigate('/Players', {
      userId: id,
    });
  };

更改为(带状态):

const handleSelect = (id: number) => {
    navigate('/Players', {
      state: {
        userId: id,
      }
    });
  };

然后可以引用 props.location.state.userId在 Players页。