如何在类组件中使用next.js中的“ useRouter（）”？

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.

挂钩只能在功能组件内部使用，而不能在类内部使用。我建议根据next.js文档使用withRouter HOC：

使用useRouter挂钩，或withRouter用于类组件。

或者，如果要切换到挂钩，请参阅从类到挂钩。

---

通常，可以创建包装器功能组件，以通过prop将自定义钩子传递给类组件（但在这种情况下不可用）：

const MyClassWithRouter = (props) => {
  const router = useRouter()
  return <MyClass {...props} router={router} />
}

class MyClass...
  constructor(props) {
    this.state = {
      loc: props.router.query.loc,
      loaded: false
    };
  }