如何在 Next js 框架中解析客户端的动态路由答案

【问题标题】：How to resolve dynamic routes on client side in Next js framework如何在 Next js 框架中解析客户端的动态路由
【发布时间】：2021-07-03 10:20:40
【问题描述】：

我目前正在使用完全静态生成的 Next js，因为我想从 S3 + cloudfront 提供我的所有页面（不涉及服务器）。 Next js 对此有很好的支持，除非涉及到动态页面（例如：/posts/:id）。解决此类场景的所有框架功能都涉及在构建时渲染所有可通过的页面（这是不可行的）或让服务器来渲染这些具有动态路由的页面（因此，使站点成为混合应用程序）。为了继续保持完全静止，我需要有办法解决这个问题。在创建反应应用程序中，可以使用反应路由器并在客户端解析路由，这正是我想要为动态路由做的。但据我所知，next js 和 react-router 不兼容，所以显然这不是一个选项。

【问题讨论】：

您是否找到了解决方案或决定使用 React 路由回退到 ReactJS 应用程序？ NextJS 文档没有涵盖这个我认为很常见的用例，这有点愚蠢
当时我用的是 Vercel 而不是 S3。所以一切都是开箱即用的。但是，如果您需要完整的静态生成将其部署到其他地方，我会说解决方法是将动态部分用作查询参数
和 TBH，我认为这不一定是 NextJs 的错。这实际上取决于您部署应用程序的服务器。例如，在 S3 中，当您请求类似 your.domain.com/post/123 的内容时，它会简单地尝试在存储桶中查找 post/123.html。没有办法让它明白它应该搜索 post.html 并使用 123 作为查询参数。为此，您需要一个适当的可定制服务器

标签： react-router next.js client-side dynamic-routing

【解决方案1】：

据我所知，我认为 SSG 上的动态路由是受支持的。动态路由功能独立于getServerSideProps 或getStaticProps。您可以使用next/router 来获取您需要的参数并相应地呈现您的页面。

这是官方的例子。

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

参考

https://nextjs.org/docs/routing/dynamic-routes

【讨论】：

这行不通，因为第一次渲染 router.query 将是未定义的