Maison > Questions et réponses > le corps du texte
J'essaie d'utiliser le routage dynamique pour que l'URI ait blogs/id/
dans un projet NextJS 13 où la partie id doit être dynamique mais cela ne semble pas fonctionner. Il semble que la page correspondant au blog soit toujours affichée.
J'utilise le répertoire d'applications expérimentales de Next 13 pour ce projet et j'ai un itinéraire blogs
,我通过创建 layout.jsx
和 来设置它
. src/app/blogs/
目录中的 >page.jsx
J'ai remarqué src/app/blogs/[id]/page.jsx
中的控制台日志语句显示在服务器端控制台中。即终端(不是浏览器控制台)。但是,return语句中对应的JSX并没有渲染。相反,与 blogs
que le JSX correspondant est en cours de rendu.
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> }
-Suivant v13.3.0
- Tailwindcss v3.3.1
- Nœud v18.15.0
- fil v1.22.19
-Ubuntu 22 (Linux)
Captures d'écran du blog/2 pour référence
Captures d'écran frontales pour référence
J'ai lu la documentation officielle plusieurs fois mais je n'arrive pas à comprendre ce qui ne va pas ici et pourquoi elle ne s'affiche pas correctement. Toute aide est grandement appréciée.
P粉1988143722023-12-25 12:50:25
Hé, le problème que je vois ici n'est pas routage dynamique, mais layout.jsx.
Vous devez restituer l'enfant au lieu de restituer la page manuellement.
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} </> ) }
Plus d'informations
Pour référence