web-dev-qa-db-ja.com

未定義のプロパティ「履歴」を読み取ることができません（Reactルーター5のuseHistoryフック）

数週間前にリリースされたReact Routerの新しいuseHistoryフックを使用しています。React-routerのバージョンは5.1.2です。MyReactはバージョン16.10.1。で、私のコードは下部にあります。

しかし、react-routerから新しいuseHistoryをインポートすると、次のエラーが発生します。

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ルーターの他のすべての機能が正常に動作するため、これが何が原因かはわかりません。

*** useLocationやuseParamsなど、他のReactルーターフックを呼び出すときにも同じことが起こります。

他の誰かがこれに遭遇しましたか？これを引き起こす可能性のあるアイデアはありますか？私はこの問題に関連するウェブ上で何も見つけなかったので、どんな助けも大歓迎です。

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

これは、react-routerコンテキストがそのコンポーネントで設定されていないためです。 <Router>コンテキストを設定するコンポーネント。サブコンポーネントではuseHistoryを使用できますが、サブコンポーネントでは使用できません。

24
Brian Thompson

この問題に遭遇し、すでにコンポーネントをルーターコンポーネントでラップしている他の人々に注意してください。ルーターとuseHistoryフックが同じパッケージからインポートされていることを確認してください。それらの1つがreact-routerからインポートされ、もう1つがreact-router-domからインポートされ、それらのパッケージのパッケージバージョンが一致しない場合、同じエラーがスローされる可能性があります。両方を使用しないでください。違いについては こちら をお読みください。

3
Lenny Laughter

react-router-domを5.0.0から^ 5.1.2に更新しましたが、問題は解決しました。 useHistoryがサブコンポーネントにあることに気付くでしょう。

2
Ati Barzideh