reactjs - 无法读取未定义的属性 'history'(React Router 5的useHistory钩子(Hook))

Question

我正在使用 React Router 的新 useHistory 钩子(Hook)，它是几周前发布的。我的 React-router 版本是 5.1.2。我的 React 版本是 16.10.1。您可以在底部找到我的代码。

然而，当我从react-router导入新的useHistory时，我收到此错误:

未捕获类型错误:无法读取未定义的属性“历史记录”

这是由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 路由器 Hook (例如 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>
    )
}

Answer 1

这是因为react-router该组件中未设置上下文。因为它是<Router>设置您可以使用的上下文的组件 useHistory在子组件中，但不在那个组件中。

这是解决此问题的一个非常基本的策略:

const AppWrapper = () => {
  return (
    <Router> // Set context
      <App /> // Now App has access to context
    </Router>
  )
}

const App = () => {
  let history = useHistory(); // Works!
...
// Render routes in this component

然后请确保使用“包装器”组件而不是 App直接。