useHistory跳转后页面未刷新问题求助（react-router-dom@5.3.0）

针对你用useHistory跳转后URL变化但页面仍显示登录页的问题，结合react-router-dom v5.3.0版本，给你几个排查方向和解决方法：

• 检查App.js的路由配置
  必须用<Switch>组件包裹路由，它会按顺序匹配第一个符合条件的路由。注意根路径/要加exact属性，否则所有子路由都会匹配到Login组件，导致跳转后依然显示登录页。正确配置示例：

  import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
  import Login from './Login';
  import Home from './Home';
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>
    );
  }
  export default App;
  

• 确认Login组件在Router上下文内
  useHistory必须在<Router>组件的子组件中使用，如果Login组件被放在Router外面，不仅会报错，跳转逻辑也不会生效。确保你的Login是Router的后代组件。

• 验证history.push的调用逻辑
  检查登录提交后的逻辑，确认history.push('/home')确实被执行了，没有被错误的条件判断拦截。比如登录验证失败时不要执行跳转，成功后再调用：

  import { useHistory } from 'react-router-dom';
  
  function Login() {
    const history = useHistory();
  
    const handleSubmit = () => {
      // 这里替换成你的真实登录验证逻辑
      if (/* 登录成功条件 */) {
        history.push('/home');
      }
    };
  
    return (
      <form onSubmit={handleSubmit}>
        {/* 登录表单内容 */}
        <button type="submit">提交</button>
      </form>
    );
  }
  export default Login;
  

• 排查Home组件的有效性
  确认Home组件能正常渲染，没有语法错误或渲染异常。可以先简化Home组件，比如只返回一个简单的文本，测试是否能正常显示：

  function Home() {
    return <h1>首页</h1>;
  }
  export default Home;
  

如果以上步骤都排查过还是有问题，建议检查是否有全局的状态管理（比如Redux）或路由守卫逻辑，可能是登录状态没有正确更新导致路由没有切换。

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