React Router v5下浏览器返回按钮点击后仅URL变更却显示空白页面的问题排查与解决求助

首先可以明确：你的问题描述非常准确，这是React Router v5中嵌套Router或history管理不当导致的典型问题。

问题根源 #

1. 嵌套Router冲突：你的SignUp组件内部嵌套了<Router history={history}>，而通常整个React应用只需要一个顶层Router（比如在App.js或入口文件中）。嵌套的Router会创建独立的路由上下文，当你点击浏览器返回按钮时，外层Router的URL变化无法同步到内层Router的状态，导致组件无法重新渲染，出现空白页。
2. history对象未正确获取：IdentNumber组件中直接使用history.push()，但该组件并没有通过路由上下文获取到有效的history实例，这会导致路由跳转的状态管理混乱。
3. 按钮事件绑定错误：原代码中按钮绑定了onChange事件，这不符合按钮交互的逻辑，应该使用onClick，这也可能导致之前的跳转逻辑不生效。

具体修复步骤 #

1. 移除SignUp组件中的嵌套Router

修改SignUp.js，删除内层的<Router>标签，直接保留Switch、Route和Redirect：

// SignUp.js
render() {
  return (
    <div className='signUp-div'>
      <Header />
      <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>
    </div>
  );
}

2. 正确在IdentNumber组件中获取history对象

因为IdentNumber是函数组件，我们可以使用React Router v5提供的useHistory钩子来获取history实例，同时修正按钮的事件绑定：

// IdentNumber.js
import { useHistory } from 'react-router-dom'; // 导入useHistory钩子

const IdentNumber = ({setPersonalID}) => {
  const history = useHistory(); // 从路由上下文获取history对象
  const handleCheckID = () => {
    history.push('/signup/password'); // 现在可以正确触发路由跳转
  }

  return (
    <div className='form-div'>
      <button onClick={handleCheckID} > Page password</button>
    </div>
  );
};
export default IdentNumber;

3. 确保应用有且仅有一个顶层Router

确认你的应用入口文件（比如App.js或index.js）中已经配置了顶层Router，示例如下：

// App.js
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 其他路由组件，包括SignUp */}
    </Router>
  );
}

修复原理 #

• 单一Router确保整个应用共享同一个路由上下文和history实例，浏览器的前进/后退操作能正确同步路由状态，触发组件重新渲染。
• 通过useHistory（类组件可使用withRouter高阶组件）获取的history实例，能正确与顶层Router的状态联动，避免跳转状态不一致的问题。

内容的提问来源于stack exchange，提问作者ExtraSun