为什么浏览器后退按钮会返回一个带有前一个 URL 的空白页面

Question

在按下浏览器back button 时，为什么会显示一个空白页面而不是我之前访问过的组件？只有 URL 更改为前一个。
使用 React Router v5

这真是令人沮丧，我该如何解决这个问题？
SignUp.js

 render() {
    return (
      <div className='signUp-div'>
        <Header />
        <Router history={history}>
          <div className='form-div'>
            <Redirect to='/signup/mobile' /> // Default page
            <Switch>
              <Route exact path={'/signup/mobile'} component={MobileNum} />
              <Route exact path={'/signup/idnumber'}>
                <IdentNumber setPersonalID={this.props.setUserNumber} />
              </Route>
              <Route exact path={'/signup/password'}>
                <CreatePass
                  setIfSignUp={this.props.setIfSignUp}
                />
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    );
  }

IdentNumber.js

const IdentNumber = ({setPersonalID}) => {

  const handleCheckID = () => {
  history.push('/signup/password');
  }
 
  return (
    <div className='form-div'>
      <button              
        onChange={(event) => onChangeHandler(event)}       
      > Page password</button>
    </div>
  );
};

export default IdentNumber;

我解释对了吗？
谢谢

Answer 1

从代码沙盒链接中，我观察到一些可能导致此问题的情况。

从import { Router } from "react-router-dom"; 更新您的导入 到 import { BrowserRouter as Router } from "react-router-dom";

<BrowserRouter> 使用 HTML5 历史 API（pushState、replaceState 和 popstate 事件）使您的 UI 与 URL 保持同步。

路线将保持不变。您正在使用 react-router-dom v5.2.0，您可以使用 useHistory 来获取历史对象。 useHistory 简化了组件路由感知的过程。

随着我的变化：https://codesandbox.io/s/suspicious-pine-5uwoq

当它被包含在Switch 中并放置在end 中时，我们不需要exact 键用于除了默认的“/”之外的所有路由。但是exact 匹配/signup/mobile 和/signup/* 相同。 Switch 只渲染一个路由，并且首先匹配哪个路由。

An example project供参考。

如果您想自己处理后退按钮事件，请按照以下示例进行操作。

在函数组件中，我们可以通过监听历史对象来处理后退按钮的按下。

import { useHistory } from 'react-router-dom';

const Test = () => {

  const history = useHistory();
  
  useEffect(() => {
    return () => {
      if (history.action === "POP") {
        
      }
    };
  }, [history])
}

收听useEffect 中的历史记录以了解组件是否已卸载。 history.listen 让我们监听历史的变化。

示例：

import { useHistory } from 'react-router-dom';

const Test = () => {
  const history = useHistory();

  useEffect(() => {
    return history.listen(location => {
      if (history.action === 'POP') {
        
      }
    })
  }, [])
}

react-router-dom 现在有Prompt，

import {  Prompt } from "react-router-dom";

    <Prompt
       message={(location, action) => {
         if (action === 'POP') {
           // back button pressed
         }

       return location.pathname.startsWith("/test")
        ? true
        : `Are you sure you want to go to ${location.pathname}?`
     }}
     />