如何在React Router的useNavigate中同时使用state和查询参数

可以实现，你的两种写法都因为参数位置错误导致部分功能失效，下面是正确的实现方式及问题分析：

问题原因分析 #

1. 第一种写法：将state放在了第一个参数的location对象中，但React Router的navigate函数规定，state是导航选项（第二个参数）的属性，不能放在location对象里，所以state无法被正确传递。
2. 第二种写法：第一个参数是字符串路径时，第二个参数的options对象并不支持search属性，所以查询参数无法生效。

正确写法 #

写法一：使用location对象 + 独立的options参数

navigate(
  { 
    pathname: "/search",
    search: `?${createSearchParams({ query: someQuery })}`
  },
  {
    state: { someAttributeName: someAttributeValue }
  }
);

写法二：字符串路径拼接查询参数 + options参数传state

navigate(
  `/search?${createSearchParams({ query: someQuery })}`,
  {
    state: { someAttributeName: someAttributeValue }
  }
);

验证效果 #

调用上述任一写法后：

• URL地址会正确显示携带的查询参数
• 通过useLocation().state可以正常获取到传递的someAttributeName值

内容的提问来源于stack exchange，提问作者Matthew Foyle