我正在尝试使用动态路由,这样 URI 在 NextJS 13 项目中具有 blogs/id/
,其中 id 部分应该是动态的,但它似乎不起作用。似乎总是显示博客对应的页面。
我在这个项目中使用了 Next 13 中的实验应用程序目录,并且我有一个路由 blogs
,我通过创建 layout.jsx
和 来设置它
。src/app/blogs/
目录中的 >page.jsx
我注意到src/app/blogs/[id]/page.jsx
中的控制台日志语句显示在服务器端控制台中。即终端(不是浏览器控制台)。但是,return语句中对应的JSX并没有渲染。相反,与 blogs
对应的 JSX 正在被渲染。
src/app/blogs/layout.jsx
import PageTitle from '../components/Title/page-title'; import BlogPage from './page.jsx'; export default function BlogLayout() { const blogTitle = "My Blog" return ( <> <PageTitle title={blogTitle} /> <BlogPage /> </> ) }
src/app/blogs/page.jsx
function BlogPage() { return ( <> <p className="blog-text--paragraph prose text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quaerat a possimus, qui expedita iure, ipsum asperiores aliquid eveniet libero vel architecto! Assumenda incidunt dolore molestiae? </p> </> ); } export default BlogPage;
src/app/blogs/[id]/layout.jsx
import PageTitle from '../../components/Title/page-title'; import BlogPageMain from '../[id]/page'; export default function DynamicBlogLayout() { const blogTitle = "BlogPageMain Blog" return ( <> <PageTitle title={blogTitle} /> <BlogPageMain /> </> ) }
src/app/blogs/[id]/page.jsx
export default function BlogPageMain({ params, searchParams }) { console.log("The current ID is:"); console.log(params.id); return <div>ID: {params.id}</div> }
- 下一个 v13.3.0
- Tailwindcss v3.3.1
- 节点 v18.15.0
- 纱线 v1.22.19
- Ubuntu 22(Linux)
博客/二的截图供参考
前端截图供参考
我已经阅读了官方文档几次,但我无法理解这里出了什么问题以及为什么它无法正确渲染。非常感谢任何帮助。
P粉1988143722023-12-25 12:50:25
嘿,我在这里看到的问题是不是 动态路由,而是layout.jsx。
您应该渲染子级,而不是手动渲染页面。
src/app/blogs/layout.jsx
import PageTitle from '../components/Title/page-title'; export default function BlogLayout({children}) { const blogTitle = "My Blog" return ( <> <PageTitle title={blogTitle} /> {children} </> ) }
src/app/blogs/[id]/layout.jsx
import PageTitle from '../../components/Title/page-title'; import BlogPageMain from '../[id]/page'; export default function DynamicBlogLayout({children}) { const blogTitle = "BlogPageMain Blog" return ( <> <PageTitle title={blogTitle} /> {children} </> ) }
更多信息
供参考