如何解决如何在不清除URL当前地址的情况下禁用返回按钮
为此我尝试了几种变体:
没有一个是我需要的,有些只是放手。
如何防止用户在重定向到 http://localhost:3000/home
后返回,但 URL 必须保留在“/home”上,并且用户应该无法通过手动更改地址栏来导航。
(实际上是阻止返回注册)
这些是我从其他人的问题中查到的例子。
这些都不起作用。
useEffect(() => { //Non of these worked
window.history.replaceState(null,null,'/');
Or
window.addEventListener('popstate',() => {
history.go(1);
});
Or
window.addEventListener('popstate',function () {
history.pushState(null,document.title,window.location.href);
Or
window.onpopstate = function () {
history.pushState(null,window.location.href);
history.go(1);
},[]);`
在这些之后,最后一个地址可能会保留 signup/mobile
,然后返回将给出一个混合 - 缺少按钮/CSS 的错误地址。
解决方法
您可以创建一个 react-router Guard 来防止用户在通过身份验证后访问登录组件,这意味着身份验证组件需要受条件保护。
示例:
import React from 'react';
import { Route,Redirect } from "react-router-dom";
const GuardedRoute = ({ component: Component,auth,...rest }) => (
<Route {...rest} render={(props) => (
auth === true
? <Redirect to='{location.pathname}' />
: <Component {...props} />
)} />
)
export default GuardedRoute
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。