webentwicklung-frage-antwort-db.com.de

Die Eigenschaft 'history' von undefined kann nicht gelesen werden (useHistory-Hook von React Router 5)

Ich verwende den neuen useHistory-Hook von React Router, der vor einigen Wochen veröffentlicht wurde. Meine React-Router-Version ist 5.1.2. Mein React ist in Version 16.10.1. Sie finden meinen Code unten.

Wenn ich jedoch die neue useHistory vom React-Router importiere, wird folgende Fehlermeldung angezeigt:

Uncaught TypeError: Cannot read property 'history' of undefined

was durch diese Zeile im React-Router verursacht wird

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 !!!!!!!!!!!!!!!!!
}

Da es sich um useContext handelt und möglicherweise ein Konflikt mit dem Kontext vorliegt, habe ich versucht, alle Aufrufe von useContext vollständig zu entfernen, den Provider zu erstellen usw. Dies hat jedoch nichts bewirkt. Versucht mit React v16.8; dasselbe. Ich habe keine Ahnung, was dies verursachen könnte, da jede andere Funktion von React Router funktioniert einwandfrei.

*** Beachten Sie, dass dasselbe passiert, wenn Sie die anderen React Router-Hooks wie useLocation oder useParams) aufrufen.

Hat das noch jemand erlebt? Irgendwelche Ideen, was dies verursachen könnte? Jede Hilfe wäre sehr dankbar, da ich im Internet nichts zu diesem Thema gefunden habe.

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>
    )
}

17
Radu Sturzu

Dies liegt daran, dass der React-Router-Kontext in dieser Komponente nicht festgelegt ist. Da es das <Router> Komponente, die den Kontext festlegt, den Sie useHistory in einer Unterkomponente verwenden können, jedoch nicht in dieser.

24
Brian Thompson

Hinweis für andere Personen, die auf dieses Problem stoßen und die Komponente bereits mit der Routerkomponente umwickelt haben. Stellen Sie sicher, dass der Router und der useHistory-Hook aus demselben Paket importiert werden. Der gleiche Fehler kann ausgelöst werden, wenn einer von ihnen vom React-Router und der andere vom React-Router-Dom importiert wird und die Paketversionen dieser Pakete nicht übereinstimmen. Verwenden Sie nicht beide, lesen Sie über den Unterschied hier .

3
Lenny Laughter

Ich habe mein react-router-dom von 5.0.0 bis ^ 5.1.2 und es wurde gelöst. Möglicherweise stellen Sie fest, dass sich useHistory in einer Unterkomponente befindet.

2
Ati Barzideh