语法错误：不提供名为“useHistory”的导出

Question

我尝试使用

useHistory

钩子来保护 ReactJs Vite 应用程序中的路由，但收到错误：

未捕获的语法错误：请求的模块 '/node_modules/.vite/deps/react-router-dom.js?v=6b9126db' 没有 提供名为“useHistory”的导出

我使用 JWT 登录并将令牌保存在 localStorage 中。

这是我的代码：

import { useHistory } from "react-router-dom";

export default function AdminNews() {

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      history.push("/login");
  }}, [history]);

  //rest of the code 
}

Answer 1

如果您使用的是 React-Router-DOM v6，则

useHistory

钩子将替换为

useNavigate

钩子。

import { useNavigate } from "react-router-dom";

export default function AdminNews() {
  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      navigate("/login");
  }}, [navigate]);

  //rest of the code 
}

如果您不打算安装 RRDv6，那么您可以恢复到 v5。

• npm uninstall react-router-dom

• npm install react-router-dom@5

  并重新启动应用程序