数週間前にリリースされたReact Routerの新しいuseHistoryフックを使用しています。私のReact-routerのバージョンは5.1.2です。My Reactのバージョンは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>
)
}