Невозможно прочитать свойство 'history' из undefined (использовать ловушку истории React Router 5)

18

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

Тем не менее, когда я импортирую новую историю использования из реагирующего маршрутизатора, я получаю эту ошибку:

Uncaught TypeError: Cannot read property 'history' of undefined

которая вызывается этой строкой в React-роутере

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

reactjs react-router react-hooks react-router-dom react-context Раду Стурзу
источник

31

Это потому, что контекст реагирующего маршрутизатора не установлен в этом компоненте. Так как это <Router>компонент, который устанавливает контекст, который вы можете использовать useHistoryв подкомпоненте, но не в этом.

Брайан Томпсон
источник

Спасибо, Брайан. Это действительно было причиной проблемы. :)

Раду Стурзу

1

Дох, так очевидно, когда ты указал на это, спасибо

Джейсон Роджерс

6

Примечание для других людей, которые сталкиваются с этой проблемой и уже обернули компонент с компонентом Маршрутизатора. Убедитесь, что Router и хук useHistory импортированы из одного пакета. Та же самая ошибка может быть выдана, когда один из них импортирован из Reaction-router, а другой из Reaction-router-dom и версии пакетов этих пакетов не совпадают. Не используйте их оба, прочитайте о разнице здесь .

Ленни Смех
источник

2

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

Ати Барзидех
источник

Невозможно прочитать свойство 'history' из undefined (использовать ловушку истории React Router 5)

Ответы: