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

Question

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

pages/[detailPageCategory]/[slug].js
pages/[editorialPageCategory]/[slug].js

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

pages/[pageType]/[slug].js

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

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

是否有解决此问题的最佳做法？或许是 Next 的“getLayout”函数？

Answer 1

您可以创建容器文件夹，并且可以在其中拥有模板 对于每个类别页面，这样您就可以分离出不同的 页面用户界面。

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

这样页面模板会被吐到不同的chunk中，不会一下子全部加载出来。

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
}