Подгруппы в Next Js

Question

Я новичок в следующем js, я создал файл orders.js в каталоге страниц и могу получить к нему правильный доступ с localhost: 3000 / orders.

Тем не менее, я хочу теперь иметь подмаршрут, чтобы получить доступ к порядку с идентификатором 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

Вы можете попробовать использовать next-маршруты , динамические маршруты для 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 2

Это тоже тривиально с Nextjs, однако вы пытаетесь достичь этого более сложным путем.

Ваш первый подход верен. Если вы не укажете маршрут для своих страниц в файле server.js, Nextjs автоматически использует их, если URL-адрес правильный (в этом случае orders приводит к переходу на страницу orders.js).

То, что вы ищете, - это создание собственного маршрута. Вы можете увидеть документацию для этого здесь

Я нахожу пример в документации сбивающим с толку, поэтому я рекомендую использовать экспресс. Вот пример для этого. Затем вы можете увидеть экспресс-маршруты в файле server.js примера.

Ваш маршрут будет выглядеть примерно так:

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

Где :id - это параметр запроса, к которому вы можете обратиться на странице getInitialProps на странице orders.js.

С примерами экспресс-маршрутизации можно ознакомиться в документации по .