如何解决如何在 Next js 框架中解析客户端的动态路由
我目前正在使用完全静态生成的 Next js,因为我想从 S3 + cloudfront(不涉及服务器)为我的所有页面提供服务。 Next js 对此有很好的支持,除非涉及动态页面(例如:/posts/:id)。解决此类场景的所有框架功能都涉及在构建时渲染所有可传递页面(这是不可行的),或者让服务器渲染这些具有动态路由的页面(因此,使站点成为混合应用程序)。 要继续保持完全静态,我需要有办法解决这个问题。 在 create react app 中,可以使用 react-router 并解析客户端的路由,这正是我想要为动态路由做的事情。但据我所知,next js 和 react-router 不兼容,所以显然这不是一个选择。
解决方法
根据我的了解,我认为支持 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
参考
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。