React Router Dom中useHistory钩子未识别问题及修复求助

云上老周

2026-7-20

解决react-router-dom中useHistory未找到及页面空白问题

问题根源

你安装的react-router-dom是v6版本，该版本已移除useHistory钩子，改用useNavigate；从react引入useHistory完全错误，React核心库并不提供这个钩子，导致浏览器运行时报错，页面渲染失败。

修复步骤

1. 替换useHistory为useNavigate

修改Signup组件的导入和使用逻辑：

// 替换原导入语句
// import {useHistory} from "react-router-dom";
import { useNavigate } from "react-router-dom";

const Signup = () => {
  // 替换useHistory实例化
  // const history = useHistory();
  const navigate = useNavigate();

  // 在submitHandler函数中替换跳转逻辑
  // history.push("/chats");
  navigate("/chats");
}

2. 确保组件在Router上下文内

检查根组件（如App.js或index.js），确保所有使用路由钩子的组件都被BrowserRouter包裹，示例：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Signup from "./Signup";
import Chats from "./Chats";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/signup" element={<Signup />} />
        <Route path="/chats" element={<Chats />} />
      </Routes>
    </Router>
  );
}

若缺少Router包裹，路由钩子无法获取上下文，会直接导致页面空白或报错。