从React/Next.js中的getInitalProps重定向

Question

我正在使用React和Next.js并尝试在该页面的数据不可用时从页面重定向用户Router.push('/another-page').

为此,我正在检查状态代码getInitalProps并应用条件.它看起来像这样:

  const statusCode = action.currentArticle ? 200 : 404

  if (isServer) res.statusCode = statusCode

  if (statusCode === 404) {
    Router.push('/')
  }

状态代码正在设置正确,它使它在条件内,此时我遇到这个错误: No router instance found. You should only use "next/router" inside the client side of your app.

实际上,无论我尝试重定向组件的生命周期事件中的哪个位置,我都会收到相同的错误,并且我在网上获得的关于此错误的信息很少.

重定向的模式getInitalProps可以在next.js wiki中看到:HERE

关于为什么会出现此错误或如何修复错误的任何想法都非常感谢;)

Answer 1

使用Next.js(以及任何通用的反应呈现),您的代码将在两个不同的环境中执行.首先在Node(在服务器上),然后在浏览器中.接下来做一些工作来提供在这两种环境中运行的统一功能,但它们是非常不同的.接下来不能也不会保留这一点.看起来你只是在浏览器中加载了一个页面,但是这里有一些关于真实情况的细节......

在客户端/浏览器上:

• 在地址栏中键入url(localhost:3000或其他),按enter键.
• GET请求发送到服务器(节点).

在服务器/节点上:

• GET请求进来.
• Node为您提供请求和响应对象.
  • 也许你有一些Express路由/中间件.
• 在某些时候render(),使用请求和响应对象调用Next的函数.
• 接下来运行getInitialProps并传递请求/响应.
• 反应renderToString()被称为其调用下面反应生命周期方法:
  • constructor()
  • componentWillMount()
  • render()
• React创建一个HTML字符串,并将其发送到客户端.

这是节点.你无法访问window,你没有fetch,你不能使用下一个路由器.那些是浏览器的东西.

回到客户端:

• 下载HTML并开始渲染.
• 下载/运行HTML中js/css文件的链接.
  • 这包括由Next编译的js代码.
• render()运行React ,将下载的HTML(DOM)与React虚拟DOM相关联.将运行以下React生命周期方法:
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
• 所有其他生命周期方法(更新)将在props/state更改时运行.

这是浏览器.你有window,你有fetch,你可以使用下一个路由器.现在你没有节点请求/响应,但这似乎让人们少了.

参考:组件生命周期

Answer 2

next / router在服务器上不可用，这是一条错误消息，指出找不到路由器，next / router只能在客户端使用。

为了在服务器中的getInitialProps中重定向用户，可以使用：

getInitialProps({server,res}){
 if(server)
  res.redirect('/');
 else
  Router.push('/');
}