Estoy usando el nuevo enlace useHistory de React Router, que salió hace unas semanas. La versión de mi React-router es 5.1.2. Mi React está en la versión 16.10.1. Puedes encontrar mi código en la parte inferior.
Sin embargo, cuando importo el nuevo useHistory de react-router, aparece este error:
Uncaught TypeError: Cannot read property 'history' of undefined
que es causado por esta línea en React-router
function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; <---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!! }Dado que está relacionado con useContext y tal vez un conflicto con el contexto tiene la culpa, intenté eliminar por completo todas las llamadas a useContext, crear el proveedor, etc. Sin embargo, eso no hizo nada. Probé con React v16.8; la misma cosa. No tengo idea de qué podría estar causando esto, ya que todas las demás características del enrutador React funcionan bien.
***Tenga en cuenta que sucede lo mismo cuando llama a los otros ganchos del enrutador React, como useLocation o useParams.
¿Alguien más ha encontrado esto? ¿Alguna idea de lo que puede causar esto? Cualquier ayuda sería muy apreciada, ya que no encontré nada en la web relacionado con este problema.
import React, {useEffect, useContext} from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import { Switch, useHistory } from 'react-router' import { useTranslation } from 'react-i18next'; import lazyLoader from 'CommonApp/components/misc/lazyLoader'; import {AppContext} from 'CommonApp/context/context'; export default function App(props) { const { i18n } = useTranslation(); const { language } = useContext(AppContext); let history = useHistory(); useEffect(() => { i18n.changeLanguage(language); }, []); return( <Router> <Route path="/"> <div className={testClass}>HEADER</div> </Route> </Router> ) }Es porque el contexto react-router no está configurado en ese componente. Dado que es el componente <Router> que establece el contexto, podría usar useHistory en un subcomponente, pero no en ese.
Aquí hay una estrategia muy básica para resolver este problema:
const AppWrapper = () => { return ( <Router> // Set context <App /> // Now App has access to context </Router> ) } const App = () => { let history = useHistory(); // Works! ... // Render routes in this component Luego, asegúrese de usar el componente "envoltorio" en lugar de la App directamente.
Tenga en cuenta a otras personas que se encuentran con este problema y ya han envuelto el componente con el componente del enrutador. Asegúrese de que el enrutador y el enlace useHistory se importen del mismo paquete. Se puede generar el mismo error cuando uno de ellos se importa desde react-router y el otro desde react-router-dom y las versiones de esos paquetes no coinciden. No use ambos, lea sobre la diferencia aquí .
useHistory no funcionará en el componente donde tiene sus rutas porque el contexto que se necesita para useHistory aún no está establecido.
useHistory funcionará en cualquier componente o componentes secundarios que haya declarado en su enrutador , pero no funcionará en el componente principal del enrutador ni en el componente del enrutador en sí.