NextJS 13 中的動態路由未如預期運作。如何讓它發揮作用？

Question

我正在嘗試使用動態路由，這樣 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）

截圖供參考：

部落格/二的截圖供參考

# 前端截圖供參考

我已經閱讀了官方文件幾次，但我無法理解這裡出了什麼問題以及為什麼它無法正確渲染。非常感謝任何幫助。

Answer 1

嘿，我在這裡看到的問題是不是 動態路由，而是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/1，app/blogs/[id]內的佈局將會渲染
• 我不知道用例，但只是為了在訪問http://localhost:3000/blogs 時app/blogs/[id] 中不存在佈局時提供資訊/1 在這種情況下，它將渲染最接近的一個，它將位於app/blogs 中，這意味著我們不需要多個佈局

供參考

• 頁面與版面 - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• 路由群組 - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts