为什么 NextJS 中未定义查询参数？答案

【问题标题】：Why would a query param be undefined in NextJS?为什么 NextJS 中未定义查询参数？
【发布时间】：2019-08-13 23:15:36
【问题描述】：

我正在使用Router(Page) 调用一个页面，并期望页面的变量（页面称为[category].js）在初始页面加载时出现。查询本身在那里，键在那里，但值是“未定义”。似乎在服务器端调用了几次 getInitialProps，其中 2/3 未定义。

react 组件有构造函数等。它不是函数式组件。

这是我当前的 getInitialProps：

Category.getInitialProps = async ({ req, query }) => {
  let authUser = req && req.session && req.session.authUser
  let categoryData = {}
  let categoryItemData = {}
  let category = query.category
  if(category){
    let res = await fetch(url1,
    {
        method: 'POST',
        credentials: 'include',
    })
    categoryData = await res.json();
    let categoryItemsRes =  await fetch(url2, 
        {
            method: 'POST',
            credentials: 'include',
        })
    categoryItemData = await categoryItemsRes.json();
  }

  return { query, authUser, categoryData, categoryItemData }
}

【问题讨论】：

似乎 getInitialProps 被调用了两次，不知道为什么会这样。一次有数据，一次没有。

标签： javascript reactjs next.js

【解决方案1】：

此时这可能是多余的，但我也遇到了这个问题，发现文档解释了这个here

在预渲染期间，路由器的查询对象将为空，因为在此阶段我们没有要提供的查询信息。水化后，Next.js 将触发对您的应用程序的更新，以在查询对象中提供路由参数。

你可以试试这个：

export async function getServerSideProps(ctx) {
  const { id } = ctx.query;
  return {
    props: {
      id,
    },
  };
}

这样它在渲染服务器端时获取查询参数，因此它们立即可用。

【讨论】：

^ 很好的答案。以下链接的第一行显示“如果您从页面导出名为 getServerSideProps 的异步函数，Next.js 将使用 getServerSideProps 返回的数据在每个请求上预渲染此页面。”所以本质上，NextJS 只需将其放在页面上即可自动检测该功能。 nextjs.org/docs/basic-features/…

【解决方案2】：

对于使用express自定义服务器的其他人，要修复undefined参数，我们必须将动态路由设置为server.js，如下所示：

# server.js
...

app.prepare().then(() => {
  const server = express();
  ....

  server.get('/product/:category', (req, res) => {
    const { category } = req.params;
    return app.render(req, res, `/product/${category}`, req.query)
  })
  
  ...
}

然后，正如 Valentijn 回答的那样，我们可以获得类别参数。

# pages/product/[category].js
....

export async function getServerSideProps(ctx) {
  const {category} = ctx.params;
  return {
    props: {
      category
    },
  };
};

...

关键是动态路径/product/${category}。不要使用/product/:category

【讨论】：