2

我目前正在更新一个 React 项目以使用 Next.js。我偶然发现了动态路由的一个小问题，到目前为止我在网上找不到任何解决方案。

我有许多使用相同组件并根据 slug 显示不同内容的信息页面。使用react-router这些可以指定如下：

path: /:infoPage(about-us|terms|privacy|contact|faqs)

/about-us, /terms, /privacy, /contact, /faqs

到目前为止，对于 Next.js，我认为我会使用如下所示的动态路由。唯一的问题是 URL 现在将具有/infoPage/___- /infoPage/about-us, /infoPage/terms.

/pages
   /infoPage
      /[infoPage].js

作为解决方案，可以使用as正确的 URL 更新链接：

<Link href="/infoPage/[infoPage]?infoPage=about-us" as="/about-us">
   <a>About Us</a>
</Link>

虽然这在单击链接时有效，但刷新页面最终会出现 404 页面 - 因为 Next.js 不知道任何页面为/about-us.

可能的解决方案

  • 使用动态路由/pages/[infoPages].js。不太确定这是否是理想的解决方案，因为它很可能会像回退到任何其他页面一样。

  • 我想我可以在每个页面中单独声明/pages并在每个页面中导入相同的组件，但它会稍微重复。

    /pages
    /about-us.js
    /terms.js
    ...

  • 保留/infoPage/[infoPage].js路由，将来自客户端/服务器的重定向添加到正确的 URL

我可能想多了，第二种解决方案不会是世界末日，但我仍然想知道是否有更好的解决方案。

提前致谢 ：）

4

1 回答 1

0

如果有人正在寻找这个问题的答案，您可以考虑以下两种解决方案。

/pages1.根级别的动态路由

用例：使用具有相似数据的相同组件的页面（例如 API 调用以获取页面内容）

如果您在根级别有某些彼此相似的页面，则可以创建动态路由，如下所示：

/pages
   /[rootPage].js

请记住，如果这些页面使用静态站点生成，则需要使用getStaticPaths.

此处获取有关 getStaticPaths 的更多详细信息

同样重要的是要注意预定义路由优先于动态路由。如果动态路由与预定义路由具有相同的 slug，Next 将始终呈现预定义路由。因此，这种方法在根级别可能存在风险。

动态路由注意事项

2. 单独的路线，一个getStaticProps功能

用例：页面需要类似的数据/API 调用，但使用不同的组件

您可以选择为每个页面设置路线，但使用相同的getStaticProps功能。

路线：

/pages
   /about-us.js
   /terms.js

getStaticProps辅助功能：

const getPageStaticProps = () => {
   return async (context) => {
      // generic logic here
   }
}

页 ( about-us.js, terms.js):

// /pages/about-us.js
function AboutPage(props) {
   return <AboutComponent {...props} />
}

export const getStaticProps = getPageStaticProps()

---

// /pages/terms.js
function TermsPage(props) {
   return <TermsComponent {...props} />
}

export const getStaticProps = getPageStaticProps()

这也可以使用getServerSideProps.

我选择了第二种解决方案，因为它感觉更安全，并且仍然受益于在不同页面之间共享代码。显然，我们那里可能还有其他可以使用的解决方案:)

于 2021-10-26T15:55:23.523 回答