Next.js路由跳转时组件无数据问题求助

这个问题的核心是Next.js两种路由模式的本质差异：

• 刷新/setup页面时，会触发完整的服务器端请求，走你自定义服务器里的server.get('/setup')逻辑，你把testData作为参数传给app.render后，这些数据会被合并到ctx.query中，所以getInitialProps能正常拿到数据。
• 但通过客户端导航（比如用next/link或router.push）进入/setup时，Next.js是在浏览器端完成路由切换，不会发起新的服务器请求，自然不会触发你自定义服务器的/setup路由处理逻辑，此时ctx.query里没有你传入的testData，页面组件也就拿不到预期数据。

根据你的场景，这里提供两种实用的解决思路：

思路1：改用getServerSideProps（推荐，Next.js 9.3+） #

getServerSideProps会在每次页面请求（不管是刷新还是客户端导航）时都在服务器端执行，能确保任何场景下都能拿到需要的数据，还能摆脱对自定义服务器路由的依赖。

修改你的页面代码：

import { withAuth } from '../utils/withAuth'; 

const Setup = props => { 
  console.log(props); // 现在刷新和客户端导航都能拿到数据了
  return( <div>Setup here</div> ) 
}; 

export async function getServerSideProps(ctx) {
  // 这里可以写你的数据获取逻辑：从数据库拉取、调用接口，或者直接定义静态数据
  const testData = { name: "Test", testProp: "testVal" };
  return {
    props: testData // 把数据传递给页面组件
  };
}

export default withAuth(Setup);

修改后，你可以删除自定义服务器里的/setup路由处理代码，因为getServerSideProps已经接管了数据获取的逻辑。

思路2：保留自定义服务器与getInitialProps，适配客户端导航 #

如果你不想改动现有自定义服务器的逻辑，可以通过以下两种方式适配客户端导航场景：

方法A：客户端导航时携带参数 #

在跳转的页面里，通过Link组件的query参数传递数据：

import Link from 'next/link';

// 其他页面中的跳转链接
<Link href={{ pathname: '/setup', query: { name: "Test", testProp: "testVal" } }}>
  <a>进入Setup页面</a>
</Link>

这样不管是刷新还是客户端导航，ctx.query里都会包含这些参数，你的getInitialProps就能正常拿到数据。

方法B：在getInitialProps中统一处理数据获取 #

把数据获取逻辑移到getInitialProps里，让它在服务器端和客户端都能执行：

import { withAuth } from '../utils/withAuth'; 

const Setup = props => { 
  console.log(props); 
  return( <div>Setup here</div> ) 
}; 

Setup.getInitialProps = async ctx => {
  let testData;
  if (ctx.req) {
    // 服务器端场景：可以从数据库、接口或自定义逻辑获取数据
    testData = { name: "Test", testProp: "testVal" };
  } else {
    // 客户端场景：发起API请求获取数据，或直接使用静态数据
    testData = await fetch('/api/get-setup-data').then(res => res.json());
  }
  return testData;
}; 

export default withAuth(Setup);

这种方式能保证两种路由场景下页面都能拿到数据，同时不需要依赖自定义服务器的路由参数传递。

内容的提问来源于stack exchange，提问作者Murakami