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

问题描述

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

解决方法

根据我的了解,我认为支持 SSG 上的动态路由。动态路由功能独立于 getServerSidePropsgetStaticProps。您只需使用 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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...