在 Reactjs 中，我正在编写一个函数组件，其中包含一个如下所示的按钮：<button onClick = {() =>history.goBack()}>
Go Back
</button>我需要确保单击按钮时，仅当上一页位于应用程序内时才返回，我该如何实现？非常感谢您的帮助！
3 回答
不负相思意
TA贡献1777条经验 获得超10个赞
document.referrer返回用户上次访问的页面的 URL（除非您的页面是直接使用 URL 栏访问的）
使用此的示例：
function goBack() {
if(document.referrer.includes(window.location.host)){
window.history.back();
}
}
该函数includes只是根据一个字符串是否包含另一个字符串返回一个布尔值。
window.location.host是页面的当前主机名和任何关联的端口。
凤凰求蛊
TA贡献1825条经验 获得超4个赞
我想不出任何很好的解决方案来解决你的问题 - 这可能是不可能的（或者我只是知道得不够）。
但是，有一种解决方法在您的应用程序中实施可能会困难，也可能不困难，具体取决于多种因素。历史记录 API允许您进行已经发现的浏览器导航。诀窍是利用它在浏览器历史记录中的每个点保存状态的能力。
如果每当用户导航到应用程序的不同部分时，您都使用History.pushState()实现导航，并向每个导航添加类似的状态{allowBackNav:true}，那么每当用户单击向后导航按钮时，您都可以确保allowBackNav在允许该操作之前，将历史记录的状态设置为 true。除了用户第一次加载您的应用程序时之外，历史上的每个时刻都会设置此状态。
如果用户通过受控的history.pushState() 之外的任何其他方式（例如通过链接）导航到应用程序的一部分，则该系统将会崩溃。
这是一个完整的工作示例。
<html>
<body>
<button id="back" onClick="back()" disabled>Back</button>
<button onClick="choose('A')">Option A</button>
<button onClick="choose('B')">Option B</button>
<button onClick="choose('C')">Option C</button>
<p id="option"></p>
<script>
window.back = function() {
history.back()
}
window.choose = function(option) {
history.pushState({allowBackNav: true}, '', `?option=${option}`)
updateUI()
}
function updateUI() {
const currentOption = new URL(window.location.href).searchParams.get('option')
document.getElementById('option').innerText = currentOption ? `Selected: ${currentOption}` : ''
document.getElementById('back').disabled = !(history.state && history.state.allowBackNav)
}
updateUI()
window.addEventListener('popstate', event => {
updateUI()
})
</script>
</body>
</html>
拉丁的传说
TA贡献1789条经验 获得超8个赞
每次路由更改时，您都可以将 URL 保存在窗口对象的历史状态中。在你的情况下，如果你只保存主机名而不是完整的 URL 就可以了。像这样 ：
window.history.pushState({ prevUrl: window.location.host }, null, "/new/path/in/your/app");
您可以编写一个自定义函数，该函数将在单击时调用：
goBack(){
if(window.history.state && window.history.state.prevUrl){
let url = window.history.state.prevUrl;
//check if the url matches with the your applications host name
if(url == 'hostName'){
history.goBack();
}
}
}
添加回答
举报
0/150
提交
取消