如何在 React 中构建基于查询的 URL

Question

我有一个应用程序，它接受搜索字符串并在一条路线中返回结果：hosts.abc.com:3000。网址不变。

我希望搜索反映在网址中，这样我就可以共享链接，并且用户不必在表单字段中进行所有选择。

eg: hosts.abc.com:3000/?type=all&query=coins

是否可以使用react-router来做到这一点？

Answer 1

要构造这样的查询，您可以使用本机浏览器URLSearchParams：

const searchParams = new URLSearchParams();
searchParams.append("type", "all");
searchParams.append("query", "coins");
searchParams.toString(); // "type=all&query=coins"

// update browser url
this.props.history.push('/current/route/?' + searchParams.toString());
// or
this.props.history.push({
  pathname: '/current/route/',
  search: searchParams.toString()
})

但如果你想要更好的支持，查询字符串是一个类似的选项。