Sto usando il nuovo uso History hook di React Router, uscito poche settimane fa. La mia versione di React-router è 5.1.2. My React è alla versione 16.10.1. Puoi trovare il mio codice in fondo.
Tuttavia, quando imposto il nuovo useHistory dal reagente-router, ottengo questo errore:
Uncaught TypeError: Cannot read property 'history' of undefined
che è causato da questa linea in 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 !!!!!!!!!!!!!!!!!
}
Poiché è correlato a useContext e forse è in conflitto un conflitto con il contesto, ho provato a rimuovere completamente tutte le chiamate a useContext, creando il provider, ecc. Tuttavia, ciò non ha fatto nulla. Provato con React v16.8; stessa cosa. Non ho idea di cosa potrebbe causare questo, poiché ogni altra funzionalità del router React funziona bene.
*** Si noti che la stessa cosa accade quando si chiamano gli altri hook del router React, come useLocation o useParams.
Qualcun altro ha riscontrato questo? Qualche idea su cosa potrebbe causare questo? Qualsiasi aiuto sarebbe molto apprezzato, in quanto non ho trovato nulla sul web relativo a questo 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>
)
}