web-dev-qa-db-fra.com

React-Routeur Jet TypeError: Usecontext (...) est indéfini lors de l'utilisation de l'utilité

Sur mon propre code, j'ai essayé d'utiliser le réact-routeur useHistory en l'ajoutant aux importations:

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

puis définir une variable avec elle sur ma fonction App() Fonction:

let history = useHistory();

Quand je le fais, je reçois l'erreur:

TypeError: useContext(...) is undefined

en venant du réact-routeur's hooks.js, la ligne spécifique est la suivante:

return useContext(Context).history;

L'ensemble du fichier ressemble à ceci:

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

Quelque plus de contexte:

enter image description here

J'ai essayé d'accéder à React.useContext Sur mon propre code et il est défini et c'est une fonction.

Des idées ce qui pourrait aller ici?

reactjsreact-routerreact-hooks
9
pupeno

Je pense que vous devriez envelopper votre application dans Index.js avec le navigateur (comme routeur), puis dans votre application, vous définissez le commutateur et les itinéraires. Parce que vous ne pouvez pas utiliser UTILISATION OU UTILOCATION DANS LE MEME FICHIER OU QUE VOUS UTILISEZ BROWERERROUTER. Ainsi, utilisez un wrapper browserrouter un niveau supérieur.

4
Gherghel Andrei

Cela se produit parce que vous devez envelopper votre composant dans un élément Router. par exemple:

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

J'ai rencontré un problème similaire avec useRouteMatch(). Je ne sais pas si la cause est la même. Je reçois l'erreur Cannot read property 'match' of undefined À partir de la ligne useContext(Context).match; Lorsque vous appelez useRouteMatch() Dans mes tests.

Option 1:

L'une des façons du retour de USEContext peut être indéfini est si le contexte fourni à usecontext n'inclut aucune donnée. Par exemple, si vous supprimez value={{ name: "Pupeno" }} De https://codesandbox.io/s/react-hooks-usecontext-example-wv76d?file=/src/index.js:320-347 = Vous verrez une erreur similaire.

Il pourrait y avoir un bug similaire dans react-router-dom Qui permet au contexte d'être vide lorsqu'il est appelé à partir de ces crochets.

Option 2:

Il est difficile de dire sans regarder votre code. Cela pourrait aussi être quelque chose comme - https://github.com/reactTraine/react-router/issues/7332

0
Assaf