No se puede leer la propiedad 'historial' de indefinido (use el gancho de Historia de React Router 5)

Estoy usando el nuevo gancho useHistory de React Router, que salió hace unas semanas. Mi versión del router React es 5.1.2. My 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 desde react-router, me sale este error:

Uncaught TypeError: Cannot read property 'history' of undefined

causada 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 es culpable, intenté eliminar por completo todas las llamadas a useContext, crear el proveedor, etc. Sin embargo, eso no hizo nada. Probado con React v16.8; la misma cosa. No tengo idea de qué podría estar causando esto, ya que todas las demás funciones del enrutador React funcionan bien.

*** Tenga en cuenta que sucede lo mismo cuando se llaman a los otros enganches React enrutador, 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 <Router>componente que establece el contexto que podría usar useHistoryen un subcomponente, pero no en ese.

Nota para otras personas que se encuentran con este problema y ya han envuelto el componente con el componente Router. Asegúrese de que el enrutador y el gancho useHistory se importen del mismo paquete. Se puede lanzar el mismo error cuando uno de ellos se importa desde react-router y el otro desde react-router-dom y las versiones de paquete de esos paquetes no coinciden. No use ambos, lea sobre la diferencia aquí .

Actualicé mi react-router-domde 5.0.0 a ^ 5.1.2 y se ha resuelto. Puede notar que useHistoryestá en un subcomponente.