首页  >  问答  >  正文

NextJS 13 中的动态路由未按预期工作。如何让它发挥作用?

我正在尝试使用动态路由,这样 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 正在被渲染。

项目中的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粉066224086P粉066224086322 天前483

全部回复(1)我来回复

  • P粉198814372

    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}
            </>
          )
        }
    

    更多信息

    • 页面内容会自动传递到最近的layout.jsx 例如,如果您尝试访问http://localhost:3000/blogs应用/博客内的布局将被渲染
    • 如果您尝试访问http://localhost:3000/blogs/1app/blogs/[id]内的布局将被渲染
    • 我不知道用例,但只是为了在访问 http://localhost:3000/blogs 时 app/blogs/[id] 中不存在布局时提供信息/1 在这种情况下,它将渲染最接近的一个,它将位于 app/blogs 中,这意味着我们不需要多个布局

    供参考

    回复
    0
  • 取消回复