Routes.push() 在 NextJS 中没有按预期工作

Question

当用户试图在未经身份验证的情况下访问应用程序的仪表板时，我试图将用户重定向到主页，但 Route.push() 不起作用。

我试图将 Router.push('/') 更改为 Router.push('/hey') -> 一个不存在的页面，这成功了，路线改变了。此外，当我尝试访问这样的路径 Router.push('/auth/signin') 时，它不起作用，而 Router.push('/auth') 有效

import { isAuthenticated } from "../helpers/auth";
import { Component } from "react";
import { Router } from "../routes";

class Ads extends Component {
  // static async getInitialProps(ctx) {
  //   if (ctx && ctx.req) {
  //     console.log(ctx);
  //     //ctx.res.writeHead(302, { Location: `/` });
  //     ctx.res.end();
  //   } else {
  //     console.log("client side");
  //     console.log(localStorage.getItem("auth-token"));
  //   }
  // }

  handleAuthentication = () => {
    if (localStorage.getItem("auth-token")) {
      return true;
    }
  };

  componentDidMount() {
    if (this.handleAuthentication()) {
      console.log("hey");
    } else {
      Router.pushRoute("/auth/signup");
    }
  }

  render() {
    return (
      <div>
        <p> Dashboard </p>
      </div>
    );
  }
}

export default Ads;

Answer 1

您似乎在使用 next-router 依赖项？

尝试使用 next/router（nextjs 的默认依赖项），它在我的代码中工作正常：

import Router from "next/router";

{ other code... }

Router.push("/auth/signup");

Answer 2

我遇到了同样的问题并找到了解决方法，但没有找到解决方案。我用 window.location

//keep your base urls in a global variables file
import { devUri, productionUri } from "../globalVariables";


push = (route = "") => {
  const uri = process.env.NODE_ENV === "production" ? productionUri : devUri;
  window.location = uri + '/' + route
}


push("/auth/signup")
push("/path/to/whatever/route/you/like")
push() //navigates to your base uri

}

您可以将该函数保存到您的 globalVariables.js 版本中，并根据需要导入（与从第 3 方模块导入其他函数的方式大致相同）

import { devUri, productionUri, push } from "../globalVariables";

顺便说一句，我运行遇到了与您遇到的完全相同的问题：Router.push("/") 或任何其他存在的地址似乎根本没有触发，Router.push("/unexistentlocation") 正常工作

Answer 3

这很好用，而且是一种干净而现代的方式（使用 Hooks）。

步骤是：-

先导入

   import { useRouter } from 'next/router';

声明它

   const router = useRouter();

使用它

   router.push('/search');

例子

import { useRouter } from 'next/router';

const Banner = () => {

    const router = useRouter();

    const sendToSeachPage = () => {
        router.push('/search');
    };


   return ( .... )

}

Routes.push() 在 NextJS 中没有按预期工作

Routes.push() not working as expected at NextJS

routes

token

reactjs

next.js