如何在 React 中使用 useHistory 挂钩发送多个参数？

Question

history.push({pathname: '/search?', state: {param1: 'value1'}}) 这行不通。它只是重定向到 /search

history.push('/search?', {param1: 'value1'}) 这行不通。

history.push('/search?', ['param1=value1']) 这行不通。

history.push('/search?', [... 'param1=value1']) 这行不通。

history.push('/search?', state: {param1: 'value1'}) 这行不通。

唯一有效的是：history.push('/search?param1=value1')。

但是我需要动态发送多个参数。我怎么做？官方文档显示了第一个带有对象的示例，但它对我不起作用。顺便说一句，我正在使用功能组件。

Answer 1

这个怎么样？

history.push('/search?param1=value1&param2=value2')

Answer 2

如果我对你的问题的理解正确，你想动态地 get/set URL 的 queryString 参数。

None 您分享的示例有效，因为 history.push 的第二个参数是路由状态。

history.push(path|To, [state])

尝试在第二个参数中传递 queryString 参数无效。

使用 URLSearchParams 构建一个 searchParams 对象，然后您可以更新其参数，以在 history.push 方法中使用。此方法保留任何现有的 queryString 参数。

示例：

const { search } = useLocation();

...

// get the search params for the current location
const searchParams = new URLSearchParams(search);

// update params as necessary, i.e. set/delete
searchParams.set("param1", "value1");
searchParams.set("param2", "value2");
searchParams.set("param3", "value3");

// push new route using to object
history.push({
  pathname: "/search",
  search: searchParams.toString(),
});

OFC，如果您不需要这种级别的控制而只需要注入三个动态值，您可以使用模板字符串。

history.push(`/search?param1=${value1}&param2=${value2}&param3=${value3}`);

如何在 React 中使用 useHistory 挂钩发送多个参数？

How to send MULTIPLE params with useHistory hook in React?

reactjs

react-router-dom