无法读取未定义的属性“历史"(React Router 5 的 useHistory 钩子) [英] Cannot read property 'history' of undefined (useHistory hook of React Router 5)

问题描述

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

I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom.

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

Yet when I import the new useHistory from react-router, I get this error:

未捕获的类型错误:无法读取未定义的属性历史"

这是由 React-router 中的这一行引起的

which is caused by this line in 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 路由器的所有其他功能都可以正常工作.

Since it is related to useContext and perhaps a conflict with context is at fault, I tried completely removing all calls to useContext, creating the provider, etc. However, that did nothing. Tried with React v16.8; same thing. I have no idea what could be causing this, as every other feature of React router works fine.

***注意，在调用其他 React 路由器钩子时会发生同样的事情，例如 useLocation 或 useParams.

***Note that the same thing happens when calling the other React router hooks, such as useLocation or useParams.

有没有其他人遇到过这种情况?任何可能导致这种情况的想法?任何帮助将不胜感激，因为我在网上找不到与此问题相关的任何内容.

Has anyone else encountered this? Any ideas to what may cause this? Any help would be greatly appreciated, as I found nothing on the web related to this issue.

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

推荐答案

这是因为 react-router 上下文未在该组件中设置.由于 组件设置了上下文，因此您可以在子组件中使用 useHistory，但不能在子组件中使用.

It's because the react-router context isn't set in that component. Since its the <Router> component that sets the context you could use useHistory in a sub-component, but not in that one.

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

Here is a very basic strategy for solving this issue:

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.

Then just be sure to use the "wrapper" component instead of App directly.

这篇关于无法读取未定义的属性“历史"(React Router 5 的 useHistory 钩子)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！