链接与导航
Next.js 的路由器允许您在页面之间进行客户端路由跳转，类似于单页应用程序 (SPA) 的体验。
系统提供了一个名为 Link 的 React 组件来实现这种客户端路由跳转。
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">首页</Link>
</li>
<li>
<Link href="/about">关于我们</Link>
</li>
<li>
<Link href="/blog/hello-world">博客文章</Link>
</li>
</ul>
)
}
export default Home上面的示例使用了多个链接。每个链接都将路径 (href) 映射到一个已知页面：
/→pages/index.js/about→pages/about.js/blog/hello-world→pages/blog/[slug].js
视口内的任何 <Link />（初始加载或通过滚动出现的）都会默认预获取（包括对应数据），适用于使用 静态生成 (Static Generation) 的页面。对于 服务端渲染 (server-rendered) 的路由，其对应数据仅在点击 <Link /> 时才会获取。
链接到动态路径
您还可以使用插值来创建路径，这对于 动态路由段 (dynamic route segments) 非常有用。例如，展示一个作为 prop 传递给组件的文章列表：
import Link from 'next/link'
function Posts({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
{post.title}
</Link>
</li>
))}
</ul>
)
}
export default Posts示例中使用
encodeURIComponent是为了保持路径的 UTF-8 兼容性。
或者，使用 URL 对象：
import Link from 'next/link'
function Posts({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link
href={{
pathname: '/blog/[slug]',
query: { slug: post.slug },
}}
>
{post.title}
</Link>
</li>
))}
</ul>
)
}
export default Posts现在，我们不再使用插值创建路径，而是在 href 中使用 URL 对象，其中：
pathname是pages目录中的页面名称。本例中为/blog/[slug]query是包含动态段的对象。本例中为slug
注入路由器
要在 React 组件中访问 router 对象，您可以使用 useRouter 或 withRouter。
通常我们推荐使用 useRouter。
命令式路由
next/link 应该能满足大多数路由需求，但您也可以不使用它来进行客户端导航，请参阅 next/router 文档。
以下示例展示了如何使用 useRouter 进行基本页面导航：
import { useRouter } from 'next/router'
export default function ReadMore() {
const router = useRouter()
return (
<button onClick={() => router.push('/about')}>
点击此处阅读更多
</button>
)
}浅层路由
示例
浅层路由 (Shallow Routing) 允许您在不重新运行数据获取方法的情况下更改 URL，这些方法包括 getServerSideProps、getStaticProps 和 getInitialProps。
您将通过 router 对象（由 useRouter 或 withRouter 添加）接收更新后的 pathname 和 query，而不会丢失状态。
要启用浅层路由，请将 shallow 选项设为 true。参考以下示例：
import { useEffect } from 'react'
import { useRouter } from 'next/router'
// 当前 URL 是 '/'
function Page() {
const router = useRouter()
useEffect(() => {
// 总是在首次渲染后进行导航
router.push('/?counter=10', undefined, { shallow: true })
}, [])
useEffect(() => {
// 计数器发生了变化！
}, [router.query.counter])
}
export default PageURL 将更新为 /?counter=10 且页面不会被替换，只有路由状态发生了变化。
您也可以通过 componentDidUpdate 监听 URL 变化，如下所示：
componentDidUpdate(prevProps) {
const { pathname, query } = this.props.router
// 确认 props 已变更以避免无限循环
if (query.counter !== prevProps.router.query.counter) {
// 基于新查询获取数据
}
}注意事项
浅层路由 仅 适用于当前页面的 URL 变更。例如，假设我们有另一个页面 pages/about.js，然后执行：
router.push('/?counter=10', '/about?counter=10', { shallow: true })由于这是一个新页面，即使我们要求进行浅层路由，它也会卸载当前页面、加载新页面并等待数据获取。
当浅层路由与中间件 (middleware) 一起使用时，它不会像之前没有中间件时那样确保新页面与当前页面匹配。这是因为中间件能够动态重写，并且无法在没有数据获取的情况下在客户端验证（浅层路由会跳过数据获取），因此必须始终将浅层路由变更视为浅层处理。