NextJS 13中的动态路由无法按预期工作,如何让它工作?

vof42yt1  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(142)

我试图使用动态路由,这样URI就有blogs/id/ n NextJS 13项目,其中id部分应该是动态的,但它似乎不起作用。它似乎总是显示对应于博客的页面。
我正在使用Next 13中的实验应用程序目录为这个项目,我有一个路由blogs,我通过创建layout.jsxpage.jsxsrc/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
我已经浏览了几次官方文档,但我不能理解这里有什么问题,为什么它没有正确渲染。任何帮助都是非常感谢的。

sr4lhrrt

sr4lhrrt1#

嘿,我在这里看到的问题是不是*动态路由而是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}
        </>
      )
    }

更多信息
*页面内容会自动传递到最近的布局。jsx例如,如果您尝试访问http://localhost:3000/blogsapp/blogs**内的布局将被呈现

  • 如果您试图访问http://localhost:3000/blogs/1内的布局将呈现app/blogs/[id]
  • 我不知道用例,但仅供参考,如果在访问http://localhost:3000/blogs/1时,布局不存在于app/blogs/[id]中,则会呈现最接近的一个,在这种情况下,它将位于app/blogs中,这意味着我们不需要多个布局

供参考

相关问题