Javascript NextJS：如何将数据从一个页面发送到另一个页面'；getInitialProps函数

我正试图将数据从B页（登录）发送到A页（索引）

getInitialProps

，因为我需要A页的getInitProps的一个键来实际获取道具

我目前正试图通过向自定义express路由发送POST请求，并使用该路由呈现页面服务器端，以便运行getInitialProps。但问题是，即使在服务器端构建页面，浏览器也不会呈现页面

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

快线：

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请求中获得传入的密钥

试试这个

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)
})

---

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

键
。
您的方法只适用于服务器端呈现的页面（因为您需要使用
req
），而不适用于客户端。即使你让它工作了一次，当你尝试导航到此路径时，你的逻辑可能会中断，或者你可能会以应用程序的一部分为SPA，然后在访问此页面时进行一些刷新而告终

从nextjs文档：

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

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


将页面B实现为一个组件，如果满足某些条件，则从页面a调用它。B页没有getInitialProps，但A页有，而且似乎您需要从A页getInitialProps了解一些信息，以便正确呈现B页，所以为什么不使用单个页面呢？用户不会知道其中的区别

使用Redux或类似的工具。您可以将道具的值存储在商店中，该商店是全局可用的，甚至可以获取InitialProps。但要当心！在尝试访问第B页上的道具之前，请将道具保存到存储区。页面的getInitialProps在HoC之前运行

如果我有点困惑，很抱歉。但是我需要B页的一些内容，以便A页使用初始数据进行渲染。但你是对的。我将实现的逻辑将在客户端路由上中断。在我开始使用此路径之前，我的设置是，正如您所说的，页面B是页面a的一个组件，但是页面a无法从页面B组件获取所需的初始数据，因为它已经运行了getInitialprops函数。我想我最终会采用Redux方法，但正如我所说的，没有什么倒退。需要访问A页中商店的道具，但B页会放在那里。我认为这不可能。。。如果A页需要从B页获得它，但A页先运行，然后B页。。。嗯，听起来你真的需要改变一下。最好使用Redux，它可能会帮你省去很多麻烦，让你的代码更干净：）哈哈，你的钱是对的。我试图通过使用PageB将数据发送到服务器，服务器将使用数据重新呈现PageA。就像你说的那样，我最终和redux一起去了，而且好多了，所以谢谢你！欢迎@ohryan！如果你认为我的答案是正确的，请做标记。虽然你的答案在我的处境中帮助了我更多，但它并不是对所提出问题的回答=（我想，但如果有人来这篇文章寻找标题问题的答案，这个答案可能不适合他们，而莫霍的答案正好完成了我在发布问题时认为我需要的。如果你不同意，请告诉我。
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)
})