web-dev-qa-db-fra.com

Impossible de lire la propriété 'historique' d'undefined (hook useHistory de React Router 5)

J'utilise le nouveau crochet useHistory de React Router, qui est sorti il ​​y a quelques semaines. Ma version de React-router est 5.1.2. My React is à la version 16.10.1. Vous pouvez trouver mon code en bas.

Pourtant, lorsque j'importe le nouveau useHistory de react-router, j'obtiens cette erreur:

Uncaught TypeError: Cannot read property 'history' of undefined

qui est causé par cette ligne dans 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 !!!!!!!!!!!!!!!!!
}

Puisqu'il est lié à useContext et qu'un conflit avec le contexte est peut-être en cause, j'ai essayé de supprimer complètement tous les appels à useContext, de créer le fournisseur, etc. Cependant, cela n'a rien fait. Essayé avec React v16.8; même chose. Je n'ai aucune idée de ce qui pourrait être à l'origine de cela, car toutes les autres fonctionnalités de React router fonctionnent très bien).

*** Notez que la même chose se produit lors de l'appel des autres crochets de routeur React, tels que useLocation ou useParams.

Quelqu'un d'autre a-t-il rencontré cela? Des idées sur ce qui peut provoquer cela? Toute aide serait grandement appréciée, car je n'ai rien trouvé sur le Web concernant ce problème.

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>
    )
}
reactjsreact-routerreact-hooksreact-router-domreact-context
17
Radu Sturzu

C'est parce que le contexte react-router n'est pas défini dans ce composant. Depuis son <Router> composant qui définit le contexte que vous pourriez utiliser useHistory dans un sous-composant, mais pas dans celui-ci.

24
Brian Thompson

Remarque pour les autres personnes qui rencontrent ce problème et ont déjà encapsulé le composant avec le composant Router. Assurez-vous que le routeur et le crochet useHistory sont importés du même package. La même erreur peut être levée lorsque l'un d'eux est importé de react-router et l'autre de react-router-dom et que les versions de package de ces packages ne correspondent pas. N'utilisez pas les deux, lisez la différence ici .

3
Lenny Laughter

J'ai mis à jour mon react-router-dom de 5.0.0 à ^ 5.1.2 et il a été résolu. Vous remarquerez peut-être que useHistory est dans un sous-composant.

2
Ati Barzideh