Next Js 中的子路由

Question

我是 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 实现同样的效果？

谢谢

Answer 1

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

你的第一种方法是正确的。如果您没有在 server.js 文件中为您的页面指定路由，如果 URL 正确，Nextjs 将自动使用它们（在这种情况下，订单导致 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。

Answer 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)
  })

Answer 3

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

pages/
       orders/
              [id].js

Answer 4

使用

pages/ orders/ [dynamic_subroute].js

现在用

捕捉它

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

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

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

Subroutes in Next Js