Неможливо прочитати "історію" властивостей невизначеного (використовуйтеІсторичний гак React Router 5)

Я використовую новий користувальний історичний гак React Router, який вийшов кілька тижнів тому. Моя версія React-маршрутизатора - 5.1.2. Мій Реакція знаходиться у версії 16.10.1. Ви можете знайти мій код внизу.

Однак, коли я імпортую нове useHistory від react-router, я отримую цю помилку:

Uncaught TypeError: Cannot read property 'history' of undefined

що викликано цією лінією в 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 !!!!!!!!!!!!!!!!!
}

Оскільки це пов’язано з useContext і, можливо, конфлікт з контекстом винен, я спробував повністю видалити всі виклики до useContext, створивши провайдера тощо. Однак це нічого не зробило. Пробували з React v16.8; однакові речі. Я не маю уявлення, що може спричинити це, оскільки будь-яка інша функція маршрутизатора React працює чудово.

*** Зауважте, що те саме відбувається під час виклику інших гачків маршрутизатора React, таких як useLocation або useParams.

Хтось ще стикався з цим? Будь-які ідеї, що може спричинити це? Будь-яка допомога буде дуже вдячна, оскільки я не знайшов нічого в Інтернеті, пов'язаного з цим питанням.

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

Це тому, що контекст реактора-маршрутизатора не встановлений у цьому компоненті. Оскільки його <Router>компонент, який задає контекст, ви можете використовувати useHistoryв підкомпоненті, але не в цьому.

Зверніть увагу на інших людей, які стикаються з цією проблемою і вже обернули компонент компонентом Router. Переконайтесь, що маршрутизатор та гачок useHistory імпортуються з одного пакету. Таку саму помилку можна припустити, коли один з них імпортується з react-router, а інший з react-router-dom, і версії пакетів цих пакетів не збігаються. Не використовуйте обох, читайте про різницю тут .

Я оновив свій react-router-domз 5.0.0 до ^ 5.1.2, і це було вирішено. Ви можете помітити, що значення useHistoryзнаходиться в підкомпоненті.