Как проложить маршрут или перейти к маршруту программно в компоненте класса nextjs?

#javascript #reactjs #next.js #router

#javascript #reactjs #next.js #маршрутизатор

Вопрос:

Я создаю простое приложение с использованием nextjs. большинство моих компонентов являются функциональными компонентами. Однако у меня есть компонент класса для обработки формы.

Я хочу перенаправить на домашнюю страницу после отправки формы. console.log(this.router) выдает undefined. Поскольку это компонент класса, я не могу использовать useRouter() hook. Как мне получить ссылку на маршрутизатор в компонентах класса в next.js ?

Ответ №1:

Наконец-то я получил ответ,

 import Router from 'next/router'
 

и использовать Router.push(...)

Ответ №2:

В качестве альтернативы использованию next/router экспорта по умолчанию напрямую, withRouter HOC также может добавить объект 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)