當在 reactjs 組件中返回重定向推送時，瀏覽器后退按鈕不起作用（僅 Chrome 和 Edge - 在 firefox 中是可以的）

Question

我有如下組件（不完全像這樣，但或多或​​少地說明了這種情況）：

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 中，一切都按預期工作。

Chrome：Chrome 中的后退按鈕

邊緣：邊緣的后退按鈕

Firefox：Firefox 中的后退按鈕

你可以在這里預覽這種情況： https : //codesandbox.io/s/back-button-issue-fyjq9

Answer 1

我和你有同樣的問題，但我使用的是 history.pushState。 可以查看history.pushSate的方法

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

如果您不想重新加載頁面，只需在title null/空字符串。 如果你想通過它，只需在title輸入文本

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