如何在 getInitialProps 中从 URL 获取查询参数？

Question

我有一个干净的URL，其中包含一些查询参数，就像这样：

http://localhost:3000/post/:id

我想在客户端捕获查询参数'id'，像这样：

static async getInitialProps({req, query: { id }}) {
    return {
        postId: id
    }
}

render() {
  const props = { 
       data: {
          'id': this.props.postId        // this query param is undefined
       }
  }
  return (
     <Custom {...props}>A component</Custom>
  )
}

我的Express端点看起来像这样。

app.post(
    '/post/:id',
    (req, res, next) => {
        let data = req.body;
        console.log(data);
        res.send('Ok');
    }
);

但我的服务器端控制台输出结果如下。

{ id: 'undefined' }

我已经阅读了文档和Github问题，但似乎无法理解为什么会发生这种情况。

- cocoPuffs

---

你有检查 location.pathname 吗？ - dfsq

是的，刚刚完成了路径，它在 /post/B1L8VE0UF。 - cocoPuffs

我想我可以直接插入location.pathname而不是使用查询。 - cocoPuffs

我认为你需要根据执行环境来决定使用哪个。 - dfsq

Answer 1

您的前端代码是正确的，从查询字符串中获取帖子ID是正确的方法。

然而您的后端代码是错误的，首先需要使用GET路由来呈现Next.js页面，并且必须提取路径参数以创建最终的查询参数，这可以使用express实现，如下所示：

const app = next({ dev: process.env.NODE_ENV === 'development' });
app.prepare().then(() => {
  const server = express();
  server.get('/post/:id', (req, res) => {
    const queryParams =  Object.assign({}, req.params, req.query);
    // assuming /pages/posts is where your frontend code lives
    app.render(req, res, '/posts', queryParams);
  });
});

请查看此Next.js示例：https://github.com/zeit/next.js/tree/canary/examples/parameterized-routing 获取更多信息。

- saimeunt