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

reactjs React.js

十三西门

2020-03-24

我正在使用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

对此错误发生原因或解决方法的任何想法都值得赞赏；）

第3376篇《从React / Next.js中的getInitalProps重定向》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

伽罗Davaid 2020.03.24

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

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

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

蛋蛋前端 2020.03.24

使用Next.js（以及任何通用反应渲染），您的代码将在两个不同的环境中执行。首先在节点（在服务器上）中，然后在浏览器中。Next做一些工作来提供在这两种环境中都可以运行的统一功能，但是它们却大不相同。下一步不能也不会阻止您。好像您刚刚在浏览器中加载了页面，但是这里有一些实际情况的详细信息……

在客户端/浏览器上：

在地址栏中输入url（localhost：3000或其他），然后按Enter。
GET请求发送到服务器（节点）。

在服务器/节点上：

GET请求进入。
Node给您一个请求和一个响应对象。
- 也许您有一些Express路由/中间件。
在某个时候render()，使用请求和响应对象调用Next的函数。
下一步运行getInitialProps并传递请求/响应。
renderToString()调用React ，它将调用以下React生命周期方法：
- constructor()
- componentWillMount()
- render()
React创建了一个发送给客户端的HTML字符串。

^这是节点。您无法访问window，您没有访问权限，fetch也不能使用下一路由器。这些是浏览器的东西。

返回客户端：

下载HTML并开始渲染。
HTML中指向js / css文件的链接已下载/运行。
- 这包括Next编译的js代码。
render()运行React ，它将下载的HTML（DOM）与React虚拟DOM相关联。以下React生命周期方法将运行：
- constructor()
- componentWillMount()
- render()
- componentDidMount()
道具/状态更改时，所有其他生命周期方法（更新）将运行。