Tidak dapat membaca properti 'histori' yang tidak terdefinisi (use hook Sejarah React Router 5)

Saya menggunakan hook useHistory baru dari React Router, yang keluar beberapa minggu yang lalu. Versi React-router saya adalah 5.1.2. React saya ada di versi 16.10.1. Anda dapat menemukan kode saya di bagian bawah.

Namun ketika saya mengimpor useHistory baru dari react-router, saya mendapatkan kesalahan ini:

Uncaught TypeError: Cannot read property 'history' of undefined

yang disebabkan oleh baris ini di 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 !!!!!!!!!!!!!!!!!
}

Karena ini terkait dengan useContext dan mungkin konflik dengan konteks salah, saya mencoba sepenuhnya menghapus semua panggilan untuk menggunakanContext, membuat provider, dll. Namun, itu tidak melakukan apa-apa. Mencoba dengan React v16.8; hal yang sama. Saya tidak tahu apa yang menyebabkan ini, karena setiap fitur lain dari router React berfungsi dengan baik.

*** Perhatikan bahwa hal yang sama terjadi ketika memanggil kait router Bereaksi lainnya, seperti useLocation atau useParams.

Adakah orang lain yang mengalami ini? Ada ide untuk apa yang menyebabkan ini? Bantuan apa pun akan sangat dihargai, karena saya tidak menemukan apa pun di web yang terkait dengan masalah ini.

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

Ini karena konteks react-router tidak diatur dalam komponen itu. Karena ini adalah <Router>komponen yang menetapkan konteks yang dapat Anda gunakan useHistorydalam sub-komponen, tetapi tidak dalam komponen itu.

Catatan untuk orang lain yang mengalami masalah ini dan sudah membungkus komponen dengan komponen Router. Pastikan bahwa Router dan hook useHistory diimpor dari paket yang sama. Kesalahan yang sama dapat terjadi ketika salah satu dari mereka diimpor dari react-router dan yang lainnya dari react-router-dom dan versi paket dari paket-paket itu tidak cocok. Jangan gunakan keduanya, baca perbedaannya di sini .

Saya memperbarui react-router-domdari 5.0.0 ke ^ 5.1.2 dan sudah terpecahkan. Anda mungkin memperhatikan bahwa komponen useHistorytersebut ada di dalam sub-komponen.