next.js 下一个js动态路由在开发中按预期工作，但在生产中返回404页面

z2acfund 于 2023-03-29 发布在其他

关注(0)|答案(1)|浏览(138)

我尝试使用动态路由来渲染页面使用下一个js.当用户点击url（http：//localhost：3000/post/123）它应该呈现一个页面，我应该能够拉id从url使用useRouter（）钩子，并显示在页面中，如下所示.这在本地开发中工作得很好，但当我在firebase上托管这个时，url返回404页面.我很困惑是什么问题.请帮助.

// [post].tsx
import React from 'react'
import { useRouter } from 'next/router'

const Details = () => {
    
    const { query } = useRouter()
    const postID = query.post

    return (
        <div>Post id: {postID}</div>
    )
}

export default Details

package.json:

文件夹结构：

next.js

来源：https://stackoverflow.com/questions/75821596/next-js-dynamic-routes-work-as-expected-in-development-but-returns-404-page-in-p

1条答案

按热度按时间

drkbr07n1#

对于URLhttp://localhost:3000/post/123，router.query对象如下所示

//[post].jsx/tsx
{ "post": "123" }

在本例中，您在[ ]中命名的名称post将是router返回的变量名
它需要一些时间来水合，所以我建议你使用useEffect来捕获id。

const router = useRouter()
const {post} = router.query

useEffect(()=>{
  if(!post) return
  //get from firebase
},[router])

NEXT JS Dynamic Routing Documentation

赞(0）回复(0）举报 2023-03-29

我来回答

next.js 下一个js动态路由在开发中按预期工作，但在生产中返回404页面

1条答案

相关问题

热门标签

最新问答