如何解决NEXT JS - 如何删除查询参数?
如何在 Next JS (React) 中不刷新页面的情况下删除或更新查询参数?
- 用户在 URL
/about?login=success&something=yes
- 单击按钮并从 URL 中删除
?login=success&something=yes
而不刷新页面。点击按钮后的 URL 将是/about
我怎样才能实现它?
正如 thread 中提到的,我知道可以使用 Router 删除查询参数或查询字符串。但是,useLocation
和 useHistory
在 next/router
上不可用。
解决方法
const router = useRouter();
router.replace("/about",undefined,{ shallow: true });
使用 replace
防止在历史记录中添加新的 URL 条目(否则只需使用 push
),而 shallow: true
允许您change the URL without running data fetching methods。这将导致重新渲染,但不会刷新页面本身。
Nextjs 具有 useRouter
钩子,可用于以编程方式更改 url。
Link to the docs。
根据History,您可以使用history.replaceState
来实现这一点。
window.history.replaceState(null,'','/about')
,
我对类似问题的解决方案是:
push(`${asPath.split('?')[0]}?comp=${id}`);
或者如果你想拥有可重用的功能:
function delQuery(asPath) {
return asPath.split('?')[0]
}
...
const {push,asPath} = useRouter()
push(`${delQuery(asPath)}?comp=${id}`);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。