ไม่สามารถอ่านคุณสมบัติ 'ประวัติ' ของไม่ได้กำหนด (useHistory hook ของ React Router 5)

ฉันกำลังใช้เบ็ดประวัติศาสตร์ใหม่ของ React Router ซึ่งออกมาเมื่อไม่กี่สัปดาห์ที่ผ่านมา เวอร์ชั่น React-router ของฉันคือ 5.1.2 React ของฉันอยู่ที่เวอร์ชัน 16.10.1 คุณสามารถค้นหารหัสของฉันที่ด้านล่าง

แต่เมื่อฉันนำเข้าการใช้งานใหม่ประวัติจาก react-router ฉันได้รับข้อผิดพลาดนี้:

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 เราเตอร์ทำงานได้ดี

*** โปรดทราบว่าสิ่งเดียวกันนี้เกิดขึ้นเมื่อมีการโทรขอเราเตอร์ 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>
    )
}

มันเป็นเพราะบริบทของปฏิกิริยาเราเตอร์ไม่ได้ตั้งอยู่ในองค์ประกอบ เนื่องจากเป็น<Router>องค์ประกอบที่กำหนดบริบทคุณสามารถใช้useHistoryในองค์ประกอบย่อย แต่ไม่ได้อยู่ในองค์ประกอบนั้น

หมายเหตุถึงบุคคลอื่นที่พบปัญหานี้และรวมส่วนประกอบของเราเตอร์แล้ว ตรวจสอบให้แน่ใจว่าเราเตอร์และเบ็ดการใช้ประวัตินำเข้าจากแพ็คเกจเดียวกัน ข้อผิดพลาดเดียวกันสามารถถูกโยนได้เมื่อหนึ่งในนั้นถูกอิมพอร์ตจาก react-router และอีกอันจาก react-router-dom และเวอร์ชันแพ็กเกจของแพ็กเกจเหล่านั้นไม่ตรงกัน อย่าใช้ทั้งของพวกเขาอ่านเกี่ยวกับความแตกต่างที่นี่

ฉันอัปเดตreact-router-domจาก 5.0.0 เป็น ^ 5.1.2 และแก้ไขแล้ว คุณอาจสังเกตเห็นว่าuseHistoryมันอยู่ในองค์ประกอบย่อย