在单个动态路径中处理两个布局

Question

我\xe2\x80\x99有大约8类详细页面，其中一半是详细页面，另一半是编辑页面。这两种页面类型的数据完全不同，并且不能将一个路由嵌套在子文件夹中。

\n

pages/[detailPageCategory]/[slug].js\npages/[editorialPageCategory]/[slug].js\n

\n

理想情况下，我\xe2\x80\x99d 为两者创建单独的页面组件以分离关注点，但 Nextjs 无法处理同一级别的两个动态路由。

\n

pages/[pageType]/[slug].js\n

\n

最好的想法是在单个动态路由中处理这两个路由吗？这感觉不干净，因为两个页面都捆绑在一起，并且我需要将一个 prop 传递给该页面pageType={layout1|layout2}并在页面组件中处理这两种情况，而不是分离关注点。

\n

pages/[detailPageCategory]/[slug].js\npages/[editorialPageCategory]/[slug].js\n

\n

是否有解决此问题的最佳实践？也许 Next\xe2\x80\x99s \xe2\x80\x98getLayout\xe2\x80\x99 函数？

\n

Answer 1

您可以创建容器文件夹，并且可以为每个类别页面提供模板，这样您就可以分离出不同页面的 UI。

在实际页面中，您可以根据pageType进行[动态导入][1]。

这样页面Template就会被分成不同的块，并且不会一次性全部加载。

const DetailPage = dynamic(() => import('../containers/DetailPage'))
const EditorialPage = dynamic(() => import('../containers/EditorialPage'))

const DynamicRoutePage = ({ pageType, data }) => {
  if (pageType === "detail") {
    return (
      <DetailPage {...data} />
    )
  }
  if (pageType === "editorial") {
    return (
      <EditorialPage {...data} />
    )
  }
  return null
}