Không thể đọc thuộc tính 'lịch sử' không xác định (hookHistory hook của React Router 5)

Tôi đang sử dụng hook useHistory mới của React Router, đã xuất hiện vài tuần trước. Phiên bản React-router của tôi là 5.1.2. Phản ứng của tôi là ở phiên bản 16.10.1. Bạn có thể tìm thấy mã của tôi ở phía dưới.

Tuy nhiên, khi tôi nhập useHistory mới từ bộ định tuyến phản ứng, tôi gặp lỗi này:

Uncaught TypeError: Cannot read property 'history' of undefined

nguyên nhân là do dòng này trong 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 !!!!!!!!!!!!!!!!!
}

Vì nó có liên quan đến useContext và có lẽ do xung đột với bối cảnh, tôi đã cố gắng loại bỏ hoàn toàn tất cả các cuộc gọi đến useContext, tạo nhà cung cấp, v.v. Tuy nhiên, điều đó chẳng làm được gì. Đã thử với React v16.8; điều tương tự Tôi không biết điều gì có thể gây ra điều này, vì mọi tính năng khác của bộ định tuyến React đều hoạt động tốt.

*** Lưu ý rằng điều tương tự xảy ra khi gọi các móc bộ định tuyến React khác, chẳng hạn như useLocation hoặc useParams.

Đã có người khác gặp phải điều này? Bất kỳ ý tưởng cho những gì có thể gây ra điều này? Bất kỳ trợ giúp sẽ được đánh giá rất cao, vì tôi không tìm thấy gì trên web liên quan đến vấn đề này.

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

Đó là vì bối cảnh bộ định tuyến phản ứng không được đặt trong thành phần đó. Vì nó là <Router>thành phần đặt bối cảnh bạn có thể sử dụng useHistorytrong một thành phần phụ, nhưng không phải trong thành phần đó.

Lưu ý cho những người khác gặp phải vấn đề này và đã bọc thành phần này với thành phần Bộ định tuyến. Đảm bảo rằng Bộ định tuyến và móc useHistory được nhập từ cùng một gói. Lỗi tương tự có thể được đưa ra khi một trong số chúng được nhập từ bộ định tuyến phản ứng và một lỗi khác từ bộ định tuyến phản ứng và phiên bản gói của các gói đó không khớp. Đừng sử dụng cả hai, đọc về sự khác biệt ở đây .

Tôi đã cập nhật react-router-domtừ 5.0.0 lên ^ 5.1.2 và nó đã được giải quyết. Bạn có thể nhận thấy rằng nó useHistorylà trong một thành phần phụ.