我试图使用动态路由,这样URI就有blogs/id/
n NextJS 13项目,其中id部分应该是动态的,但它似乎不起作用。它似乎总是显示对应于博客的页面。
我正在使用Next 13中的实验应用程序目录为这个项目,我有一个路由blogs
,我通过创建layout.jsx
和page.jsx
在src/app/blogs/
目录内设置。
我注意到src/app/blogs/[id]/page.jsx
中的控制台日志语句显示在服务器端控制台中。即终端(不是浏览器控制台)。但是,return语句中对应的JSX没有呈现。相反,对应于blogs
的JSX正在呈现。
项目中的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
- Yarnv1.22.19
- Ubuntu 22(Linux)
截图参考:
Screenshot of blogs/two for Reference
Screenshot of Frontend for reference
我已经浏览了几次官方文档,但我不能理解这里有什么问题,为什么它没有正确渲染。任何帮助都是非常感谢的。
1条答案
按热度按时间sr4lhrrt1#
嘿,我在这里看到的问题是不是*动态路由而是layout.jsx**。
您应该呈现子项,而不是手动呈现页面。
src/app/blogs/layout.jsx
src/app/blogs/[id]/layout.jsx
更多信息
*页面内容会自动传递到最近的布局。jsx例如,如果您尝试访问http://localhost:3000/blogsapp/blogs**内的布局将被呈现
供参考