Next.js动态路由参数未定义

Question

问题

在我的Next.js应用程序中，我想使用动态路由的值通过http获取一些html，并在页面上使用结果。

例如，Next路由

/test

应该导致对

的HTTP请求https://blobstorage.com/test.html

我遇到的问题是，当我进行api调用时，路由值是undefined，因此我最终向https://blobstorage.com/undefined.html发出http请求

注意:这里要明确的是，问题是在我渲染页面时该值不可用．这个问题不是在问我如何从路由器获得值。

代码范例

export default function Home() {
const [html, setHtml] = useState('')
const router = useRouter()
useEffect(() => {
const { url } = router.query
setHtmlText(url)

async function setHtmlText(htmlUrl) {
const result = await fetch(`https://blobstorage.com/${htmlUrl}.html`)
const htmlText = await result.text()
setHtml(htmlText);
}
}, [])
function createMarkup() {
return {__html: html};
}
return (
<div>
{html && <div dangerouslySetInnerHTML={createMarkup()} ></div>}
</div>    
)
}

我不知道如何渲染页面只有当从路由的值是可用的。有人能帮我一下吗?

Answer 1

你可以使用这样的页面结构进行动态路由:url/[slug].js，并在router参数中获取router.query.slug。isReady是真实的

useEffect(() => {
if(router.isReady){
const urlPath = router.query.slug;

setHtmlText(urlPath)

async function setHtmlText(htmlUrl) {
const result = await fetch(`https://blobstorage.com/${htmlUrl}.html`)
const htmlText = await result.text()
setHtml(htmlText);
}
}
}, [router.isReady]);