React Router Dom 5.2.0中useHistory跳转后页面不自动刷新求助

核心排查与修复方案 #

1. 确认路由基础配置正确性 #

先检查根组件（如App.js）是否完成了路由的基础包裹与规则配置，这是路由生效的前提：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import CreateBlog from './pages/CreateBlog'; // 确保该组件存在且导出正确

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/create-blog" component={CreateBlog} />
        {/* 其他路由规则 */}
      </Switch>
    </Router>
  );
}

• 必须用Router（BrowserRouter/HashRouter）包裹所有路由相关组件，否则useHistory等路由钩子无法获取上下文。
• Switch会确保只渲染第一个匹配的路由，避免多路由同时渲染导致的逻辑混乱。

2. 检查自定义Button组件的事件传递 #

你的Button是自定义组件，需确认它正确将onClick属性转发到内部原生按钮元素：

// 自定义Button组件的正确写法示例
const Button = ({ tittle, onClick }) => {
  return (
    <button onClick={onClick}>
      {tittle}
    </button>
  );
};

如果自定义Button没有转发onClick事件，点击时不会触发history.push，自然不会触发路由跳转。

3. 临时强制刷新（不推荐，仅应急） #

若上述配置都正常但仍无响应，可手动触发页面刷新，不过这会丢失单页应用的优势，仅作为临时方案：

onClick={() => {
  history.push("/create-blog");
  window.location.reload();
}}

4. 监听路由变化更新组件状态 #

如果是路由跳转后页面数据未刷新（而非路由未跳转），可通过useLocation监听路由变更，触发组件重新渲染或数据更新：

import { useHistory, useLocation } from "react-router-dom";
import { useEffect } from "react";

const Home = () => {
  const history = useHistory();
  const location = useLocation();

  useEffect(() => {
    // 路由变化时执行数据刷新逻辑
    // 比如重新拉取列表数据
  }, [location]);

  // 其余代码保持不变
};

关键注意事项 #

• 所有使用useHistory、useLocation等路由钩子的组件，必须处于Router的上下文范围内，否则会抛出错误。
• 避免在路由组件层级外使用路由相关API，确保路由逻辑的完整性。

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