如何解决如何摆脱查询字符串
已解决
我有一个有点愚蠢的问题。我无法摆脱查询字符串!一旦我把它放入历史记录中,我找不到如何删除它。
我有一个带导航功能的 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);
通过添加删除尾随查询字符串的 search:"" 来解决 pb。
解决方法
如@Ouroborus 所示,您只需要在解析器返回的 url 中添加 search:''
即可覆盖之前的查询字符串:
history.push({pathname: page.redirect,search:""})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。