Rumah > Soal Jawab > teks badan
Saya cuba menggunakan penghalaan dinamik supaya URI mempunyai blogs/id/
dalam projek NextJS 13 di mana bahagian id harus dinamik tetapi nampaknya tidak berfungsi. Nampaknya halaman yang sepadan dengan blog sentiasa dipaparkan.
Saya menggunakan Direktori Aplikasi Eksperimen dari 13 Seterusnya untuk projek ini dan saya mempunyai laluan blogs
,我通过创建 layout.jsx
和 来设置它
. src/app/blogs/
目录中的 >page.jsx
Saya perasan src/app/blogs/[id]/page.jsx
中的控制台日志语句显示在服务器端控制台中。即终端(不是浏览器控制台)。但是,return语句中对应的JSX并没有渲染。相反,与 blogs
bahawa JSX yang sepadan sedang diberikan.
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> }
-Seterusnya v13.3.0
- Tailwindcss v3.3.1
- Nod v18.15.0
- benang v1.22.19
- Ubuntu 22 (Linux)
Screenshot blog/2 untuk rujukan
Tangkapan skrin bahagian hadapan untuk rujukan
Saya telah membaca dokumentasi rasmi beberapa kali tetapi saya tidak dapat memahami apa yang berlaku di sini dan mengapa ia tidak dipaparkan dengan betul. Sebarang bantuan amatlah dihargai.
P粉1988143722023-12-25 12:50:25
Hei, masalah yang saya lihat di sini ialah bukan penghalaan dinamik, tetapi layout.jsx.
Anda harus membuat kanak-kanak itu dan bukannya memaparkan halaman secara manual.
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} </> ) }
Maklumat lanjut
Untuk rujukan