Next Js 中的子路由答案

【问题标题】：Subroutes in Next JsNext Js 中的子路由
【发布时间】：2019-02-07 06:35:34
【问题描述】：

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

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

所以我目前的结构是：

pages/
      orders/
             index.js
             id.js

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

使用 Nuxt js，这很简单，如何使用 next.js 实现相同的功能？

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

我发现文档中的示例令人困惑，因此我建议改用 express。这是一个example。然后您可以在示例的server.js 文件中看到快速路由。

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

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

其中:id 是一个查询参数，然后您可以在您的orders.js 页面内的getInitialProps 中访问它。

您可以查看快递documentation中的快递路由示例。

【讨论】：

【解决方案2】：

您可以尝试使用next-routes，Next.js 的动态路由

只需创建一个 routes.js 并添加，

const routes = require('next-routes')
module.exports = routes()
 .add('orders', '/orders/:id', 'orders/id')
// name, url, page folder

或者如果你只想要服务器端路由，

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

【讨论】：

【解决方案3】：

这可能会对您有所帮助：https://nextjs.org/docs#dynamic-routing。

通过将 [ ] 添加到页面，它会创建一个动态路由，在这种情况下，[orderid].js 可用于将多个订单映射到单个页面。

pages/
       orders/
              [id].js

【讨论】：

【解决方案4】：

使用

页数/ 命令/ [dynamic_subroute].js

现在用

捕捉它

const 路由器 = useRoute(); const { dynamic_subroute } = router.query;

现在，您可以从使用的 url 中动态捕获值（任何），而不是 dynamic_subroute

like- 如果 url 是 pages/orders/1 那么dynamic_subroute 在您的页面中的值将是 1

【讨论】：