Next Js中的子路由

贡萨雷斯

我是下一个js的新手,我在pages目录下创建了一个名为orders.js的文件,可以从localhost:3000 / orders正确访问它。

但是,我现在想要一个子路由,以访问ID为1的订单(例如)。因此,我在目录页面中创建了一个目录“ orders”,并将order.js重命名为index.js,之后,我在orders目录中创建了另一个名为id.js的文件。

所以我目前的结构是:

pages/
      orders/
             index.js
             id.js

但是我无法访问localhost:3000 / orders / 1。

使用Nuxt js,这很简单,如何使用next.js达到相同的目的?

谢谢

Obed Marquez Parlapiano

对于Nextjs来说,这也是微不足道的,但是,您正在尝试以更困难的方式实现它。

您的第一种方法是正确的。如果您没有在server.js文件中为页面指定路由,则URL正确时Nextjs将自动使用它们(在这种情况下,orders指向orders.js页面)。

您正在寻找的是创建自定义路线。您可以在此处查看此文档

我在文档中发现该示例令人困惑,因此我建议改用express。这是一个例子然后,您可以server.js在示例文件中查看快速路线

您的路线最终看起来像这样:

server.get('/orders/:id', (req, res) => {
  return app.render(req, res, '/orders', req.query)
}) 

:id查询参数在哪里,然后可以在您getInitialProps的orders.js页面内部访问

您可以在快速文档中查看快速路由示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章