如何在类组件中使用next.js中的“ useRouter（）”？
我试图从我的url模式中获取查询，例如localhost:3000/post?loc=100通过useRouter()从“ next / router”中使用，并使用该ID从服务器中获取一些数据。当我在无状态功能组件中使用它时，它就可以工作。
但是页面显示“ Invalid hook call”。我尝试调用getInitalProps()无状态功能组件，但该组件也无法正常工作，并显示了相同的错误。是否有使用此方法的规则？
我正在使用React库和Next.js框架开发前端。
constructor(props) {
this.state = {
loc: useRouter().query.loc,
loaded: false
};
}
第3121篇《如何在类组件中使用next.js中的“ useRouter（）”？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
挂钩只能在功能组件内部使用，而不能在类内部使用。我建议根据next.js文档使用withRouter HOC：
使用
useRouter挂钩，或withRouter用于类组件。
const MyClassWithRouter = (props) => {
const router = useRouter()
return <MyClass {...props} router={router} />
}
class MyClass...
constructor(props) {
this.state = {
loc: props.router.query.loc,
loaded: false
};
}
相似问题
问题类别
React Hooks有一个约定。挂钩的名称以开头
use。React提供了内置的或官方的钩子，但是显然，您可以构建自己的钩子。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.