I'm trying to use dynamic routing so that the URI has blogs/id/
in a NextJS 13 project where the id part should be dynamic, but it doesn't seem to work. It seems that the page corresponding to the blog is always displayed.
I'm using the Experimental Application Directory from Next 13 for this project, and I have a route for blogs
that I set up by creating layout.jsx
and It's >page.jsx
in the src/app/blogs/
directory.
src/app/blogs/[id]/page.jsx show up in the server side console. i.e. the terminal (not the browser console). However, the corresponding JSX in the return statement is not rendered. Instead, the JSX corresponding to
blogs is being rendered.
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> }Project and environment details:
Screenshots for reference:
I've read the official documentation a few times but I can't understand what's going wrong here and why it doesn't render correctly. Any help is greatly appreciated.
P粉1988143722023-12-25 12:50:25
Hey, the problem I see here is that is not dynamic routing, but layout.jsx.
You should render the child instead of manually rendering the page.
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} </> ) }
More information
for reference