当前位置：首页 > ai >正文

next 声明路由

ai 2025/8/11 19:16:40

先决条件

/src/app/layout.tsx 文件中需要包含以下内容

export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html><body>{children}</body></html>)
}

普通路由

例子 /about 页面
/src/about/page.tsx

'use client'
import Link from 'next/link'
export default function AboutPage() {return (<div><h1>About Page</h1><Link href="/">← 返回首页</Link></div>)
}

动态路由

博客例子需要新建
/app/blog/ 目录
/app/blog/page.tsx 文件

'use client'
import Link from 'next/link'export default function BlogList() {// 这里可以动态获取博客列表数据const posts = [{ id: 1, title: 'First Post', slug: 'first-post' },{ id: 2, title: 'Second Post', slug: 'second-post' }]return (<div><h1>Blog List</h1><ul>{posts.map((post) => (<li key={post.id}><Link href={`/blog/${post.slug}`}>{post.title}</Link></li>))}</ul></div>)
}

/app/blog/[slug] 目录
/app/blog/[slug]/page.tsx 文件
注意： 同名的query 参数会被覆盖
例如 url /blog/abc?slug=123
最后的 slug = ‘abc’ 而不是123

'use client'
import { useParams } from 'next/navigation'
import Link from 'next/link'export default function BlogPost() {const params = useParams()const slug = params.slug as stringreturn (<div><h1>Blog Post: {slug}</h1><Link href="/blog">← 返回博客列表</Link></div>)
}

嵌套路由

访问/a/b
新建
/app/a 目录
/app/a/b 目录
/app/a/b/page.tsx 文件

export default function BB() {return (<div>B页面</div>);
}

如果你希望能访问/a 那么需要新建一个
/a/page.tsx 文件

export default function AA() {return (<div>A页面</div>);
}

全局公共组件

例如导航栏页脚等
在目录/src/components 中存放全局的公共组件
页脚为例
/src/components/Footer
/src/components/Footer/Footer.tsx

// src/components/Footer/Footer.tsx
'use client'
import styles from './Footer.module.css'export default function Footer() {return (<footer className={styles.footer}><div className={styles.container}><p>&copy; 2024 MySite. All rights reserved.</p><div className={styles.socialLinks}><a href="#">Twitter</a><a href="#">GitHub</a></div></div></footer>)
}

/src/components/Footer/Footer.module.css

/* src/components/Footer/Footer.module.css */
.footer {background-color: #f8f9fa;padding: 2rem 0;border-top: 1px solid #eaeaea;}.container {max-width: 1200px;margin: 0 auto;text-align: center;padding: 1rem;}.socialLinks {margin-top: 1rem;}.socialLinks a {margin: 0 1rem;color: #666;text-decoration: none;}