时间戳

首页 > 解决方案 > 在 reactjs 组件中返回重定向推送时浏览器后退按钮不起作用（仅 Chrome 和 Edge - 在 firefox 中可以）

javascript - 在 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;

重定向组件具有推送属性，因此当带有“/home”的新选项卡打开并且它具有但在 chrome 和边缘中，后退按钮处于非活动状态时，历史记录应该有 2 个条目。

令人惊讶的事实是，在每个来自 javascript 的浏览器中，都可以使用以下命令返回：

window.history.back()

谁能知道为什么 chrome 和 edge 浏览器中的后退按钮无效？在 Firefox 中，一切都按预期工作。

Chrome： chrome 中的后退按钮

边缘：边缘 的后退按钮

Firefox：Firefox 中的后退按钮

您可以在这里预览这种情况：https ://codesandbox.io/s/back-button-issue-fyjq9

标签： javascriptreactjsreact-routerbrowser-history

解决方案

我遇到了同样的问题，但我使用的是 history.pushState。您可以检查 history.pushSate 的方法

例如：history.pushState(state, title [, url])

如果您不想重新加载页面，只需将 null/空字符串放入title. 如果你想传递它，只需输入文本title

链接参考：https ://www.codegrepper.com/code-examples/javascript/js+redirect+without+reloading

推荐阅读