我有一个静态导出并且具有动态路由的网站。
这个网站在开发模式下运行良好。但是,如果我构建和导出它,然后serve静态文件,它会出现问题。
您可以转到网站根目录并单击链接,它将带您转到像http://localhost:3000/post/1
这样的动态帖子页面,并且会正常工作,但是如果您刷新页面(或直接访问),它会出现404错误。
为什么会这样呢?需要访问路由查询对象的动态路由在静态导出时无法工作吗?
动态路由文档没有提到使用静态导出时动态路由的任何注意事项。
代码:
首先,以next.js静态示例为起点,我编辑了pages/post/[id].tsx
文件,删除了getStaticPaths
和getStaticProps
(因为我不需要构建时静态生成),并在挂载时添加了客户端获取。我正在获取router.query.id值并使用它来获取数据:
⚡ Codesandbox 这里(在开发中可以正常工作, 但是导出后如果在服务器上运行就会出错)
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { GetPost } from '../../lib/postdata_api'
import { PostData } from '../../types/postdata'
const Post = () => {
const [postData, setPostData] = useState<null | PostData>(null)
const router = useRouter()
const id = router.query.id as string
const fetchData = async () => setPostData(await GetPost(id))
useEffect(() => {
if (!router.isReady) return
fetchData()
}, [router, router.isReady])
if (!postData) return 'Loading...'
return (
<main>
<Head>
<title>{postData.title}</title>
</Head>
<h1>{postData.title}</h1>
<p>{postData.body}</p>
<Link href="/">
<a>Go back to home</a>
</Link>
</main>
)
}
export default Post
期望行为
我期望它的行为与开发环境中一样。也就是说,用户可以:
- 在根页面上点击链接
- 查看动态发布页面,例如
/post/1
- 刷新或直接访问此文章(而不是出现404错误)