Question

我是下一个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实现相同的目的？

谢谢

Answer 1

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

您的第一种方法是正确的。如果您未在server.js文件中为页面指定路由，则URL正确时Nextjs将自动使用它们（在这种情况下，orders指向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动态路由

只需创建一个route.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

使用

页/ 订单/ [dynamic_subroute] .js

现在用

抓住它

const router = useRoute（）; const {dynamic_subroute} = router.query;

现在，您可以从使用的网址（而不是dynamic_subroute

中动态捕获值）（任意）

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