web-dev-qa-db-ja.com

React-Router Swing TypeError：USEContext（...）がuseHistoryを使用すると未定義

自分のコードで、Importに追加することでReact-RouterのuseHistoryを使用しようとしました。

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

その後、マイApp()関数に変数を定義します。

let history = useHistory();

私がそれをするとき、私はエラーを得ます：

TypeError: useContext(...) is undefined

react-Routerの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;
}

いくつかのコンテキスト：

enter image description here

私は自分のコードでReact.useContextにアクセスしようとしましたが、定義されていて関数です。

ここで起こっているかもしれないアイデアはどんなアイデアですか？

reactjsreact-routerreact-hooks
9
pupeno

私はあなたがBrowserRouter（ルーターとして）（ルーターとして）でindex.jsにアプリをラップし、アプリ内でスイッチとルートを定義してください。 BrowserRouterを使用する同じファイルにuseHistoryまたはUselocationを使用できないためです。そのため、BrowserRouterラッパーを1レベルアップします。

4
Gherghel Andrei

これは、コンポーネントをRouter要素にラップする必要があるためです。例えば：

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
// import MyComponent

const history = createBrowserHistory();

const MyApp = ()=> (
  <Router {...{ history }}>
    <MyComponent />
  </Router>
);

export default MyApp;
 _
1
Soldeplata Saketos

私はuseRouteMatch()と同様の問題に遭遇しました。原因が同じかどうかはわかりません。テストでuseContext(Context).match;を呼び出すときにuseRouteMatch()からCannot read property 'match' of undefinedのエラーが表示されます。

オプション1：

UseContextからの戻り値の1つは未定義である可能性がある場合は、USeContextに提供されているコンテキストにデータが含まれていない場合です。たとえば、value={{ name: "Pupeno" }}から https://codesbox.io/s/react-hooks-usecontext-example-wv76d?file=/src/index.js:320-347 も同様のエラーが発生します。

これらのフックから呼び出されたときにコンテキストを空にすることを可能にするreact-router-domに同様のバグがある可能性があります。

オプション2：

あなたのコードを見ずに言うのは難しいです。それはまた https://github.com/Reacttraining/React-router/issues/7332 のようなものかもしれません。

0
Assaf