Question

我正在使用Router（Page）调用页面，并期望页面的变量（该页面称为[category] .js）在初始页面加载时出现。查询本身在那里，键在那里，但是值是'undefined'。在服务器端似乎有一些对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 }
}

Answer 1

在这一点上这可能是多余的，但是我也碰到了这一点，发现文档对此进行了解释here

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

您可以尝试以下方法：

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

通过这种方式，它在呈现服务器端时获取查询参数，因此它们立即可用。

Answer 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

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

2 个答案: