2

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

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

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

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

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

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

  • 使用内置路由的方法
  • 将 React Router 与 Next.Js 集成的示例
  • 替代库（我查看了下一条路线，但 3 年内没有更新）

更新

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

页面/[配置]/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
├ ● /[配置]/foo
├ └ /xyz/foo

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

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

4

1 回答 1

1

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

pages/[...config].tsx

这与以下内容相同：

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

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

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

于 2021-05-11T22:59:00.600 回答