Next.js 使用不同 URL 的动态路由

Question

我目前正在更新一个 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 的重定向

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

提前致谢:)

Answer 1

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

1。根级别 /pages 中的动态路由

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

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

/pages
   /[rootPage].js

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

Further details on getStaticPaths here

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

Dynamic Routing Caveats

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 来实现。

---

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