不要将 URL 添加到浏览器历史记录中答案

【问题标题】：Don't add Url to browser history不要将 URL 添加到浏览器历史记录中
【发布时间】：2019-06-14 09:51:10
【问题描述】：

我阅读了有关浏览器历史记录的信息，并且了解我无权访问历史记录对象数组，甚至无法删除它们。但是，我的任务是排除在历史记录中添加参数化 URL。我的项目中有标签，它们的 URL：

/profile,
/profile?menu=1
/profile?menu=2

我在我的项目中使用 nextjs 框架。他的导航代码：

public handleOnClickItem(key: string) {
    const id = '1';
    const href = `/profile?id=${id}&menu=${key}`;
    Router.push(href, href, { shallow: true });
    // tabs are navigated
    Router.onBeforeHistoryChange = (url) => {
        console.log('App is changing to before history change: ', url);
    };
}

我不能将此网址添加到历史记录吗？我在console.log 中得到它。而且我从方法的描述中了解到，这个 URL 不应该被载入史册。有任何想法吗？谢谢！

【问题讨论】：

什么是目标....在profile 导航到之前有返回按钮返回上一个路线吗？
示例导航：/home > /profile > /profile?menu='1' > /profile?menu='2' 当 browser.back() => 返回 /home( 从配置文件回家，好像忽略带有参数的配置文件，好像我们总是在同一个 URL 上）
因此您可以换种方式思考这一问题，并跟踪用户导航到个人资料并使用Router.beforePopState 拦截时的来源
谢谢。我会处理这个
那个人回答我的正确，但后来删除了，你只需要使用replace而不是push。我道歉，回复答案，我注意到它有帮助

标签： javascript reactjs browser-history next.js

【解决方案1】：

这应该解决它：

https://nextjs.org/docs/api-reference/next/router#routerreplace

类似于 next/link 中的 replace 属性，router.replace 将阻止向历史堆栈添加新的 URL 条目。

同时请记住，浅层路由选项用于在执行路由时触发/不触发 next.js 生命周期方法（例如 getInitialProps）。

【讨论】：

【解决方案2】：

进入网站后通过 AJAX 加载您的内容，不要保留更新的 URL。

这样做的缺点是您的用户无法为特定页面添加书签（没有永久链接）。在历史上它只会显示没有参数的基本 url。

有a similar post here on SO

【讨论】：

这和使用 next.js 路由器有什么关系？
我不太明白如何为自己做到这一点。我最近使用了 reactjs 和 nextjs 框架。在我的项目中，我在处理程序中使用下一个路由器调用。但无论如何，谢谢你的回答，我会进一步挖掘