如何路由或导航到路由编程在nextjs类组件?

Question

我正在使用nextjs构建一个简单的应用程序。我的大部分组件都是功能组件。但是，我有一个类组件来处理表单。

我想在提交表单后重定向到主页。console.log(this.router)给出未定义。因为它是一个类组件，我不能使用useRouter()钩子。我如何在next.js类组件中引用路由器?

Answer 1

我终于得到了答案，

import Router from 'next/router'

使用Router.push(...)

从Next 13开始，从next/navigation导入路由器

Answer 2

作为直接使用next/router默认导出的替代方案，withRouterHOC还可以将router对象添加到任何组件中。

import * as React from 'react'
import { withRouter } from 'next/router'
class Page extends React.Component {
render() {
const { router } = this.props
return <p>{router.pathname}</p>
}
}
export default withRouter(Page)