时间戳

首页 > 解决方案 > 如何摆脱查询字符串

javascript - 如何摆脱查询字符串

问题描述

解决了

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

我有一个带导航的 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:""来解决的，它删除了尾随的查询字符串。

标签： javascripturl-routingbrowser-history

解决方案

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

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

推荐阅读