如何解决当在 reactjs 组件中返回重定向推送时,浏览器后退按钮不起作用仅 Chrome 和 Edge - 在 firefox 中是可以的
我有像下面这样的组件(不完全像这样,但或多或少地说明了这种情况):
import React from 'react';
import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
import Home from './Home';
const App = () => {
return (
<Router>
<div>
<Route exact path="/">
<div>
<Link to={'/home'} target="_blank">
Home
</Link>
</div>
</Route>
<Route path="/home">
<Home />
</Route>
<Route path="/error-500">
<div>Error 500</div>
</Route>
</div>
</Router>
);
};
export default App;
const Home = () => {
const [isLoading,setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setIsLoading(false);
},3000);
},[]);
if (isLoading) {
return <div>Loading...</div>;
}
return <ErrorHandler />;
};
const ErrorHandler = () => {
return <Redirect push to={'/error-500'} />;
};
export default ErrorHandler;
重定向组件具有 push 属性,因此当带有“/home”的新选项卡打开时,历史记录应该有 2 个条目,但在 chrome 和 edge 中,后退按钮处于非活动状态。
令人惊讶的事实是,在来自 javascript 的每个浏览器中,都可以使用:
window.history.back()
谁能知道为什么 Chrome 和 Edge 浏览器中的后退按钮处于非活动状态?在 Firefox 中,一切正常。
您可以在此处预览这种情况:https://codesandbox.io/s/back-button-issue-fyjq9
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。