React路由跳转后URL变更但页面未渲染，需手动重载问题求助

1. 核心问题：history对象未正确获取 #

你在Onboarding组件里直接调用history.push，但如果没有拿到react-router提供的合法history对象，就会出现URL变了但页面不渲染的情况。下面分版本给出修复方式：

如果你用的是react-router-dom v5 #

用withRouter高阶组件包裹Onboarding组件，让组件能拿到路由提供的history属性：

// Onboarding组件文件
import React from 'react';
import { withRouter } from 'react-router-dom';

function Onboarding({ history }) {
  const handleRedirectToLogin = () => {
    history.push('/login');
  };

  return (
    <button className="progress-button absolute bottom-4 right-4" onClick={handleRedirectToLogin}>
      <span className="icon">→</span>
    </button>
  );
}

export default withRouter(Onboarding);

如果你用的是react-router-dom v6 #

v6已经移除了withRouter和Switch，改用Routes、element属性和useNavigate钩子：
首先修改App.js的路由配置：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Onboarding from './components/Onboarding/Onboarding';
import Login from './components/Login/Login';

function App() {
  return (
    <Router>
      <div className="flex justify-center w-[386px] h-[800px] mb-6 mt-5 ml-[35%] box-sizing:border-box rounded-sm overflow-auto -z-50">
        <Routes>
          <Route path="/" element={<Onboarding />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

然后修改Onboarding组件，用useNavigate替代history.push：

// Onboarding组件文件
import React from 'react';
import { useNavigate } from 'react-router-dom';

function Onboarding() {
  const navigate = useNavigate();

  const handleRedirectToLogin = () => {
    navigate('/login');
  };

  return (
    <button className="progress-button absolute bottom-4 right-4" onClick={handleRedirectToLogin}>
      <span className="icon">→</span>
    </button>
  );
}

export default Onboarding;

2. 辅助排查步骤 #

• 先简化Login组件，比如只返回<div>Login页面</div>，排除组件自身报错导致无法渲染的问题。
• 检查整个应用是否只存在一个BrowserRouter包裹，子组件里不要重复嵌套Router，否则会导致路由状态不共享。

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