reactjs - 使用 useHistory 时，react-router 抛出 TypeError : useContext(. ..) 未定义

Question

在我自己的代码中，我尝试使用 react-router 的 useHistory通过将其添加到导入中:

import {BrowserRouter as Router, Link, Route, Switch, useHistory} from "react-router-dom";

然后在我的 App() 上用它定义一个变量功能:

let history = useHistory();

当我这样做时，我收到错误:

TypeError: useContext(...) is undefined

来自 react 路由器的 hooks.js ，具体线路是:

return useContext(Context).history;

整个文件如下所示:

import React from "react";
import invariant from "tiny-invariant";

import Context from "./RouterContext.js";
import matchPath from "./matchPath.js";

const useContext = React.useContext;

export function useHistory() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useHistory()"
    );
  }

  return useContext(Context).history;
}

export function useLocation() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useLocation()"
    );
  }

  return useContext(Context).location;
}

export function useParams() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useParams()"
    );
  }

  const match = useContext(Context).match;
  return match ? match.params : {};
}

export function useRouteMatch(path) {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useRouteMatch()"
    );
  }

  return path
    ? matchPath(useLocation().pathname, path)
    : useContext(Context).match;
}

更多上下文:



我尝试访问 React.useContext在我自己的代码上，它是定义的，它是一个函数。

任何想法可能会发生什么？

Answer 1

我认为您应该使用 BrowserRouter(作为路由器)将您的应用程序包装在 index.js 中，然后在您的应用程序中定义交换机和路由。因为您不能在使用 BrowserRouter 的同一文件中使用 useHistory 或 useLocation。
因此，使用 BrowserRouter 包装器上一层。