0
235
Vistaserror de importación: 'useHistory' no se exporta de 'react-router-dom'
Estoy tratando de importar useHistory desde 'react-router-dom', sin embargo, aparece este error: error de importación: 'useHistory' no se exporta desde 'react-router-dom'.
También verifiqué otras respuestas, como Intento de error de importación: 'useHistory' no se exporta de 'react-router-dom', pero fue en vano. Mi paquete.json se ve así
Estoy usando useHistory como tal,
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) }Sin embargo, esta línea funciona bien y no causa problemas de importación desde react-router-dom.
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'¿Alguien tiene una idea de cómo resolver este problema? muy apreciado.
3 Respuestas
Responde la pregunta0
UseHistory ya se reemplazó con useNavigate Así que prueba esto 👇👇
import { useNavigate } from 'react-router-dom';Dentro de su función:
const navigate = useNavigate(); navigate('/home')Espero que esto haya funcionado 👌
0
useNavigate si instala v6 o más que 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(`/`); };0
La respuesta correcta a su problema es que necesita confirmar que su uso del enlace de historial está dentro del alcance de un BrowserRouter. Una solución rápida sería mover el componente BrowserRouter a un nivel superior a app.js o index.js. al invocar el enlace useHistory dentro del alcance de un componente que ya está dentro del contexto de un BrowserRouter, no debería tener problemas en v5. Las personas que comentaron sobre v6 aún necesitarían hacer esta misma solución, la respuesta es no actualizar, aunque si tiene la capacidad de actualizar, lo haría.
Corrección sugerida: renderice el BrowserRouter en index.js
// index.js ... import { BrowserRouter } from 'react-router-dom' // <=V5 not compatible with V6 render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root')); ... Luego, en cualquier componente que esté cargado dentro del componente, puede usar useHistory
Obtenga más información sobre el historial y dónde se puede cargar: https://github.com/remix-run/history