Question

我试图将数据从页面B（登录）发送到页面A的（索引）getInitialProps，因为我需要页面A的getInitProps的密钥才能实际获取道具...

我目前正在尝试通过向自定义快速路由发送POST请求并使用该路由来呈现Page服务器端来执行getInitialProps。但是问题在于，即使它是在服务器端构建的，浏览器也不会呈现该页面。

从登录页面（发生在客户端）的POST请求：

const headers = {'Content-type': 'application/json; charset=UTF-8'}
await fetch(`${getRootUrl()}/loadKey`, {method: "POST", body: JSON.stringify({key}), headers})

快速路线：

server.post('/loadKey', (req, res) => {
    // const {key} = req.body
    // console.log(key)
    next({dev}).render('/') //index page
})

该键记录得很好，并且在终端中，nextjs表示正在构建索引页面，并且运行了getInitialProps，但是浏览器上没有任何反应。没有重定向。

我尝试使用express.redirect，express.render，并且尝试强制客户端重定向，但是对于前两个，当我使用next.render时，会发生相同的事情。页面被构建，getInitialProps运行，但是浏览器上没有重定向发生。当我使用Link或Router强制进行重定向时，Index的getInitialProps将不会获得从POST请求传递的密钥。

Answer 1

尝试这个

server.post('/loadKey', (req, res) => {
    const {key} = req.body
    // Do whatever you need to do
    const actualPage = '/'
    const queryParams = { key }
    next({dev}).render(req, res, actualPage, queryParams)
})

现在您应该可以通过道具访问索引页中的key。

Answer 2

您的方法仅适用于服务器端呈现的页面（因为您需要使用req），而不适用于客户端。即使您一次使用它，尝试导航到该路线时，逻辑也会中断，或者您最终可能会将应用程序的一部分变成SPA，然后在访问此页面时会有所刷新。

来自nextjs文档：

对于初始页面加载，getInitialProps仅在服务器上执行。仅当通过Link组件或使用路由API导航到其他路由时，才会在客户端上执行getInitialProps。

我过去使用过的一些可能的解决方案：

将B页作为组件实施，如果满足某些条件，则从A页调用它。页面B没有getInitialProps，但是页面A有，并且您似乎需要了解页面A的getInitialProps才能正确呈现页面B，所以为什么不使用单个页面呢？用户不会知道区别。
使用Redux等。您可以将道具的值存储在商店中，该道具在全球都可以使用，甚至可以存储到getInitialProps。但是要当心！尝试将道具保存到商店中的之前，尝试在页面B上进行访问。页面的getInitialProps在HoC之前运行。

NextJS：如何将数据从一页发送到另一页的getInitialProps函数

2 个答案: