如何摆脱查询字符串

Question

解决了

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

我有一个带有导航功能的 React 应用程序（通用路由器）。 我不认为它与我使用的库有关，而是与 URL 和历史记录 API 的错误使用有关。

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

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

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

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

1- 发出 function，创建查询字符串

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:""来解决，它删除了尾随的查询字符串。

Answer 1

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

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