Question

导入错误：“useHistory”未从“react-router-dom”导出

2021-09-19

23948

javascript reactjs react-router-dom

我正在尝试从“react-router-dom”导入 useHistory，但是，我收到此错误：导入错误：“useHistory”未从“react-router-dom”导出。

我也检查了其他答案，例如尝试导入错误：“useHistory”未从“react-router-dom”导出这个，但无济于事。我的 package.json 看起来像这样

我正在使用 useHistory，

import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

export default function Login(){
    const history = useHistory();
    console.log(history)
}

但是，此行工作正常，不会导致从 react-router-dom 导入问题。

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

有人知道如何解决这个问题吗？非常感谢。

Answer 1

UseHistory 已被 useNavigate 取代所以试试这个👇👇

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

在你的函数内部：

const navigate = useNavigate();
navigate('/home')

我希望这有效👌

Answer 2

useNavigate 如果您安装了 v6 或更高版本 react-router-dom": ^6.2.1

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

 let navigate = useNavigate();


 const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post("http://localhost:3001/users", user);
    navigate(`/`);
 };

Answer 3

您的问题的正确答案是，您需要确认您对历史记录钩子的使用是在 BrowserRouter 的范围内 - 一个快速的解决方法是将 BrowserRouter 组件上移到 app.js 或 index.js 级别 - 只要您在 BrowserRouter 上下文中已经存在的组件范围内调用 useHistory 钩子，那么在 v5 中就不会出现任何问题。评论 v6 的人仍然需要做同样的修复，答案是不升级，尽管如果你有能力升级，我会这样做。

建议的修复：在 index.js 上渲染 BrowserRouter

// index.js
...
import { BrowserRouter } from 'react-router-dom' // <=V5 not compatible with V6

render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
...

然后在组件内加载的任何组件上，您都可以使用 useHistory

了解有关历史记录的更多信息以及它可以在何处加载 - https://github.com/remix-run/history