web-dev-qa-db-fra.com

Comment utiliser "useRouter ()" de next.js dans un composant de classe?

J'essayais d'obtenir les requêtes de mon modèle d'URL comme localhost:3000/post?loc=100 En utilisant useRouter() de "next/router" et en récupérant certaines données en utilisant cet identifiant sur mon serveur. Cela a fonctionné lorsque je l'ai utilisé dans un composant fonctionnel sans état.

Mais la page montrant "Appel de crochet invalide" alors. J'ai essayé d'appeler getInitalProps() d'un composant fonctionnel sans état, mais cela n'a pas fonctionné non plus et a montré la même erreur. Existe-t-il une règle pour utiliser cette méthode?

Je développais un front-end en utilisant React Library et Next.js Framework.

constructor(props) {
  this.state = {
    loc: useRouter().query.loc,
    loaded: false
  };
}
javascriptreactjsroutingreact-hooksnext.js
7
Shakirul Hasan

React Hooks a une convention. Les noms des hooks commencent par use. React fournit des hooks intégrés ou officiels, mais apparemment, vous pouvez en créer vos propres).

useRouter est un crochet, évidemment. Vous pouvez l'utiliser dans des composants fonctionnels. Vous ne pouvez pas l'utiliser dans les composants de classe. À l'intérieur des composants fonctionnels, vous pouvez l'utiliser comme ceci:


function MyComponent(){
   const router = useRouter();
}

withRouter, d'autre part, peut être utilisé à la fois dans les composants fonctionnels et de classe, car il s'agit d'un HOC, higher order component. Mais avec les composants de classe, vous n'avez pas le choix. Vous devez utiliser withRouter.

En conclusion, voici les documents officiels: To inject the pathname, query or asPath in your component, you can use the useRouter hook, or withRouter for class components.

0
Yumin Gui