如何摆脱查询字符串答案

【问题标题】：How to get rid of a query string如何摆脱查询字符串
【发布时间】：2020-12-22 18:05:25
【问题描述】：

已解决

我有一个愚蠢的问题。我无法摆脱查询字符串！一旦我将它放入历史记录中，我就找不到如何删除它。

我有一个带导航的 React 应用程序（通用路由器）。我不认为这与我使用的库有关，而是与 URL 和 History API 的不当使用有关。

我有一个用户列表，每个用户都有一个编号。我有一个输入表格来输入数字。我将其作为/users?nb=1 形式的查询字符串附加。此 url 被提交给在路径数组中搜索的解析器。与/users 路径对应的操作代码具有读取查询字符串是否存在的功能。如果是，则提取号码并推送新路径/users/1。这几乎行得通：事实上我推/users/1?nb=1..

注意：我当然可以直接推送 /users/1 而无需查询字符串，但这是一个练习。

有什么诀窍？？ [编辑]：覆盖密钥search:""

编辑： https://codesandbox.io/s/universal-router-mobx-demo-jg3um?file=/src/NavBar.js

1-发射函数，创建查询字符串

function handleSubmit(e) {
    e.preventDefault();
    let query = Object.fromEntries(new FormData(e.currentTarget));
    const {pathname, search} = window.location 
    const qstring = new URLSearchParams(search);
    for (const k in query){ qstring.append(k, query[k])};
    history.push({ pathname, search: "?" + qstring });
  }

1b - 与“正常”链接

const handleClick = (e) => {
    e.preventDefault();
    history.push({ pathname: e.target.pathname });
  };

2- 条件路径（用于查询字符串）

const searchString = new URLSearchParams(window.location.search);
const id = searchString.get("nb");
if (id) { return { redirect: `/users/${id}` } }

3- 解决

const page = await router.resolve({ pathname: location.pathname });
if (page.redirect) {
    return history.push({ pathname: page.redirect, search: "" });
 }                                                  ^^^!
return render(<React.StrictMode>{page}</React.StrictMode>, root);

pb 是通过添加 search:"" 来解决的，它会删除尾随的查询字符串。

【问题讨论】：

编辑@Ouroborus
我注意到您在代码片段“1.”中使用了{ pathname: "?" + qstring }。当您使用history.push() 时，您不仅限于pathname 选项。您还有（除其他外）search 选项可用。我认为您需要在处理返回的重定向时根据需要添加选项search: ''，以便它知道它应该清除查询。
确实，成功了！谢谢！我编辑了答案
@Ouroborus 和 OP 你们中有人介意将答案作为答案发布吗？只为SO精神！谢谢！

标签： javascript url-routing browser-history

【解决方案1】：

正如@Ouroborus 所示，您只需在解析器返回的网址中添加search:'' 即可覆盖之前的查询字符串：

history.push({pathname: page.redirect, search:""})

【讨论】：