Блог

У меня есть следующий пример в NextJS.

Я хочу получить доступ к маршрутизатору NextJS через withRouter специальные компоненты класса, как показано ниже.

 import UserManager from "../managers/user_manager";
import LogInPage from "../pages/auth/login";
import React from "react";
import { withRouter } from 'next/router'

export default function EnsureAuthenticated(OriginalComponent) {
    class AuthHOC extends React.Component {
        constructor(props) {
            super(props);
        }
        componentDidMount() {
            this.loggedInUser = UserManager.getLoggedInUser();
        }
        render() {
            if (!this.loggedInUser) {
                this.props.router.push(LogInPage.routePath);
            }
            return <OriginalComponent />
        }
    }
    return withRouter(AuthHOC);
}
 

Но это ошибка, которую я продолжаю получать:

 Server Error
Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance
 

Что я могу сделать по-другому, чтобы решить эту проблему?
Спасибо.

NextJS использует SSR, поэтому во время предварительного рендеринга (SSR или SSG) вы пытались получить доступ к методу маршрутизатора push (this.props.router.push(LoginPage.routePath)), который не поддерживается.

вы должны использовать следующий код в componentDidMount методе

 if (!this.loggedInUser) {
      this.props.router.push(LogInPage.routePath);
}
 

как показано ниже

   componentDidMount() {
            this.loggedInUser = UserManager.getLoggedInUser();

            if (!this.loggedInUser) {
                    this.props.router.push(LogInPage.routePath);
            }
        }