Undefined özelliği 'geçmişi' okunamıyor (React Router 5'in tarihsel kancası)

Birkaç hafta önce çıkan React Router'ın yeni kullanım geçmişini kullanıyorum. React-router versiyonum 5.1.2. Tepkim 16.10.1 sürümündedir. Kodumu altta bulabilirsiniz.

Yine de tepki yönlendiriciden yeni useHistory'i içe aktardığımda şu hatayı alıyorum:

Uncaught TypeError: Cannot read property 'history' of undefined

React-router'daki bu hattın neden olduğu

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 ile ilgili olduğundan ve belki de bağlamla ilgili bir çakışma arızalı olduğundan, useContext'e yapılan tüm çağrıları kaldırmayı, sağlayıcıyı vb. Oluşturmayı denedim. Ancak, bu hiçbir şey yapmadı. React v16.8 ile denendi; aynı şey. React yönlendiricinin diğer tüm özellikleri iyi çalıştığı için buna neden olabileceği hakkında hiçbir fikrim yok.

*** Aynı şeyin, useLocation veya useParams gibi diğer React yönlendirici kancalarını çağırırken de gerçekleştiğini unutmayın.

Başka kimse bununla karşılaştı mı? Buna neyin sebep olabileceğine dair bir fikrin var mı? Web'de bu konuyla ilgili hiçbir şey bulamadığım için herhangi bir yardım çok takdir edilecektir.

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

Tepki yönlendirici bağlamı bu bileşende ayarlanmadığı için. Onun bu yana <Router>Kullanabileceğin bağlamı ayarlar bileşen useHistoryama o birinde, bir alt bileşende.

Bu sorunla karşılaşan ve bileşeni Yönlendirici bileşeniyle zaten sarmış olan diğer kişilere dikkat edin. Yönlendirici ve useHistory kancasının aynı paketten içe aktarıldığından emin olun. Biri tepki yönlendiriciden içe diğeri tepki yönlendiriciden dom'a aktarıldığında ve bu paketlerin paket sürümleri eşleşmediğinde aynı hata ortaya çıkabilir. Her ikisini de kullanmayın, farkları buradan okuyun .

react-router-dom5.0.0'dan ^ 5.1.2'ye güncelledim ve çözüldü. Bunun useHistorybir alt bileşen içinde olduğunu fark edebilirsiniz .