web-dev-qa-db-ja.com

クラスコンポーネントでnext.jsの「useRouter（）」を使用する方法

「next/router」のuseRouter()を使用して_localhost:3000/post?loc=100_のようなURLパターンからクエリを取得し、サーバーからそのIDを使用してデータをフェッチしようとしていました。ステートレス機能コンポーネントで使用するとうまくいきました。

しかし、「無効なフックコール」を示すページが表示されます。ステートレス機能コンポーネントのgetInitalProps()を呼び出してみましたが、そこでも機能せず、同じエラーが表示されました。この方法を使用するためのルールはありますか？

React LibraryとNext.js Frameworkを使用してフロントエンドを開発していました。

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

React Hooksには規約があります。フックの名前はuseで始まります。 Reactは組み込みまたは公式のフックを提供しますが、明らかに、独自のフックを作成できます。

useRouterは明らかにフックです。機能コンポーネントで使用できます。クラスコンポーネントでは使用できません。機能コンポーネントの内部では、次のように使用できます。


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

一方、withRouterはHOCであるhigher order componentであるため、機能コンポーネントとクラスコンポーネントの両方で使用できます。しかし、クラスコンポーネントでは、選択肢がありません。 withRouterを使用する必要があります。

結論として、これは公式ドキュメントです：To inject the pathname, query or asPath in your component, you can use the useRouter hook, or withRouter for class components.

0
Yumin Gui