Динамическая маршрутизация со следующим режимом экспорта

Question

Мы используем Next.Js в следующем режиме экспорта (статический экспорт HTML), и нам нужна расширенная динамическая маршрутизация.

Наши маршруты будут выглядеть так /[config1]/[config2]/[optionalConfig?]/page, где один сегмент является необязательным, а имена страниц фиксированы. Например a/b/c/page1 или же a1/b1/page2. Страницы нуждаются в данных сегмента конфигурации для рендеринга.

Я не нашел способа сделать это с помощью встроенной маршрутизации . я могу сделать /pages/[config1]/[config2]/page1.tsx, но этот необязательный сегмент кажется проблемой. Обратите внимание, что настраиваемый сервер не является вариантом, так как мы должны использовать следующий режим экспорта из-за других ограничений.

ПРИМЕЧАНИЕ: мы не знаем пути во время сборки; они представляют собой часть нашей конфигурации времени выполнения. Это имеет для использования на стороне клиента маршрутизации. (Мы делаем знать конечное множество страниц - скажет стр.1 ... Page10 - но маршруты к этим страницам будут меняться.)

Я пробовал переключиться на React Router, установив useFileSystemPublicRoutes: false и добавление маршрутов в pages/_app.tsx(Пользовательское приложение). Это почти работает, но я вижу много ошибок 404 для on-demand-entries-utils.js в консоли, а также некоторые предупреждения «Обнаружена возможная утечка памяти EventEmitter» (в режиме разработки).

Допустимые решения (должны работать на 100% на стороне клиента):

• Способ сделать это с помощью встроенной маршрутизации
• Пример интеграции React Router с Next.Js
• Альтернативная библиотека (я смотрел следующие маршруты, но она не обновлялась уже 3 года)

Answer 1

Вы можете создать всеобъемлющий маршрут для захвата параметров, включая необязательный, и затем вам нужно будет отрендерить правильный компонент на основе этого. Итак, если вы создали:

      pages/[...config].tsx

Это то же самое, что:

      pages/[...config]/index.tsx

Затем в index.tsx, вы можете получить конфигурацию в виде массива строк в getStaticPropsна основе URL-адреса. Так /config1/config2/optional является [config1, config2, optional] а также /config1/config2 является [config1, config2].

Таким образом, вы можете использовать это как своего рода путь к каталогу, если вам нужно добавить дополнительные подстраницы по известным и необязательным путям.