问题描述
我们在 next export mode（静态 HTML 导出）中使用 Next.Js，我们需要高级动态路由。
我们的路由看起来像 /[config1]/[config2]/[optionalConfig?]/page，其中一段是可选的，页面名称是固定的。例如 a/b/c/page1 或 a1/b1/page2。页面需要配置段数据来呈现。
我还没有找到用 built-in routing 做到这一点的任何方法。我可以做 /pages/[config1]/[config2]/page1.tsx，但该可选部分似乎是一个问题。请注意，自定义服务器似乎不是一个选项，因为由于其他限制，我们必须使用下一个导出模式。
注意：我们不知道构建时的路径；它们代表了我们运行时配置的一部分。这必须使用客户端路由。 （我们确实知道有限的页面集 - 比如 page1 ... page10 - 但是到这些页面的路由会有所不同。）
我尝试切换到 React Router，设置 useFileSystemPublicRoutes: false 并将路由添加到 pages/_app.tsx（自定义应用程序）。这几乎有效，但我在控制台中看到许多 on-demand-entries-utils.js 的 404 以及一些“检测到可能的 EventEmitter 内存泄漏”警告（在开发模式下）。
有效的解决方案（必须 100% 在客户端工作）：
- 通过内置路由实现这一点
- 将 React Router 与 Next.Js 集成的示例
- 替代库（我看过 next-routes，但 3 年未更新）
更新
我们或许能够消除对可选段的要求。但是，似乎我们必须实现 getStaticPaths 并指定所有路由。例如：
pages/[config]/foo.tsx
export async function getStaticPaths() {
// Runs at build time
return {
paths: [{ params: { config: 'xyz' } }],fallback: false,};
}
export async function getStaticProps(context) {
return {
props: {},};
}
export default function FooPage(): JSX.Element {
return <div>FOO</div>;
}
这将生成
┌ ○ / ├ /_app ├ ● /[config]/foo ├ └ /xyz/foo
问题在于我们不知道构建时的配置。
我们需要动态客户端路由。我们希望继续使用 Next.js，因为最终我们也许可以使用 SSR，但目前这不是一个选项。
解决方法
您可以创建一个包罗万象的路由来获取参数，包括可选的参数，然后您需要基于此渲染正确的组件。所以如果你创建了：
pages/[...config].tsx
这与：
pages/[...config]/index.tsx
然后在 index.tsx 中，您可以根据 url 将配置作为 getStaticProps 中的字符串数组获取。所以 /config1/config2/optional 是 [config1,config2,optional]，/config1/config2 是 [config1,config2]。
因此，如果您需要在已知和可选路径下添加其他子页面，您可以将其用作各种目录路径。