具有下一个导出模式的动态路由

Question

我们在下一个导出模式（静态 HTML 导出）中使用 Next.Js ，并且我们需要高级动态路由。

\n

我们的路线将类似于/[config1]/[config2]/[optionalConfig?]/page，其中一段是可选的，并且页面名称是固定的。例如a/b/c/page1或a1/b1/page2. 页面需要配置段数据才能呈现。

\n

我还没有找到任何方法来使用内置路由来做到这一点。我可以/pages/[config1]/[config2]/page1.tsx，但是那个可选部分似乎是一个问题。请注意，自定义服务器似乎不是一个选项，因为由于其他限制，我们必须使用下一个导出模式。

\n

注意：我们不知道构建时的路径；它们代表我们运行时配置的一部分。这必须使用客户端路由。（我们确实知道页面的有限集 - 例如 page1 ... page10 - 但到这些页面的路由会有所不同。）

\n

我尝试切换到 React Router，设置useFileSystemPublicRoutes: false路由并将其添加到pages/_app.tsx（自定义应用程序）。这几乎可以工作，但我在控制台中看到许多 404on-demand-entries-utils.js以及一些“检测到可能的 EventEmitter 内存泄漏”警告（在开发模式下）。

\n

有效的解决方案（必须 100% 在客户端工作）：

\n

\n
• 使用内置路由来做到这一点的方法
\n
• 将 React Router 与 Next.Js 集成的示例
\n
• 替代库（我看过下一个路线，但已经三年没有更新了）
\n

\n

更新

\n

我们也许能够消除可选部分的要求。但是，看来我们必须实现getStaticPaths并指定所有路由。例如：

\n

页面/[config]/foo.tsx

\n

export async function getStaticPaths() {\n  // Runs at build time\n  return {\n    paths: [{ params: { config: \'xyz\' } }],\n    fallback: false,\n  };\n}\n\nexport async function getStaticProps(context) {\n  return {\n    props: {},\n  };\n}\n\nexport default function FooPage(): JSX.Element {\n  return <div>FOO</div>;\n}\n

\n

这将生成

\n

\n\xe2\x94\x8c \xe2\x97\x8b /\n\xe2\x94\x9c /_app\n\xe2\x94\x9c \xe2\x97\x8f /[config]/foo\n\xe2\ x94\x9c \xe2\x94\x94 /xyz/foo\n

\n

问题是我们不知道构建时的配置。

\n

我们需要动态客户端路由。我们希望继续使用 Next.js，因为最终我们可能能够使用 SSR，但目前这不是一个选择。

\n

Answer 1

您可以创建一个包罗万象的路由来获取参数，包括可选参数，然后您需要基于该参数渲染正确的组件。因此，如果您创建了：

pages/[...config].tsx

这与：

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

然后在 中，您可以根据 urlindex.tsx以字符串数组形式获取配置。也是getStaticProps如此，也是如此。/config1/config2/optional[config1, config2, optional]/config1/config2[config1, config2]

因此，如果您需要在已知和可选路径下添加其他子页面，您可以使用它作为某种目录路径。