如何解决具有下一个导出模式的动态路由
我们在 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]
。
因此,如果您需要在已知和可选路径下添加其他子页面,您可以将其用作各种目录路径。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。