为什么浏览器后退按钮 returns 与上一个 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

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

更新您从 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

除了默认的“/”外，我们不需要所有路由的 exact 键，当它包含在 Switch 中并放在 end[=57= 中时].但是 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}?` }} />

为什么浏览器后退按钮 returns 与上一个 URL 的空白页面

Why browser back button returns a blank page with the previous URL

navigation

reactjs

react-router

react-navigation

react-router-dom