Next.js路由详解：App Router与Page Router轻松玩转页面跳转
2023-01-15 00:59:39
Next.js 路由：掌控应用程序导航
探索 App Router 和 Page Router 的世界
在当今快节奏的网络世界中，单页应用程序 (SPA) 已成为构建交互式和响应式用户界面的首选方式。Next.js，一个 React 框架，提供了一套功能强大的路由系统，使开发人员能够轻松管理 SPA 中的导航。本文将深入探讨 Next.js 路由的两个核心概念：App Router 和 Page Router，帮助您驾驭应用程序导航的复杂世界。
App Router：应用程序范围的导航
想象一下，您正在构建一个大型电子商务网站。您希望用户能够轻松地在不同类别和产品页面之间穿梭，而无需刷新整个页面。这就是 App Router 的用武之地。
App Router 是应用程序级别的路由系统，负责管理整个 Next.js 应用程序的导航。它位于项目的根目录下的 pages/_app.js 文件中。通过 App Router，您可以处理客户端和服务器端的导航，例如重定向、预取数据以及处理动态路由。
使用 App Router 进行路由导航
App Router 提供了一系列 API，让您可以在应用程序中进行路由导航。其中最常用的方法之一是 router.push()，它用于导航到一个新路由。例如：
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
const router = useRouter();
return (
<div>
{/* 导航到 '/about' 路由 */}
<button onClick={() => router.push('/about')}>About</button>
</div>
);
}
export default MyApp;
Page Router：页面特定的导航
Page Router 是页面级别的路由系统，负责管理单个 Next.js 页面内的导航。它在每个页面组件中使用 useRouter 钩子进行配置。
Page Router 主要基于文件系统。它使用 pages 文件夹中的文件和文件夹结构来设置路由。例如，一个位于 pages/about.js 的页面可以通过 /about 路由进行访问。此外，您可以使用动态路由参数来处理特定的路径。
使用 Page Router 进行路由导航
与 App Router 类似，Page Router 也提供了自己的 API 进行路由导航。router.push() 方法仍然可用，但您还可以使用 router.back() 返回到上一个路由。例如：
import { useRouter } from 'next/router';
function AboutPage() {
const router = useRouter();
return (
<div>
{/* 返回到上一个路由 */}
<button onClick={() => router.back()}>Back</button>
</div>
);
}
export default AboutPage;
App Router 与 Page Router：何时使用哪个
选择使用 App Router 或 Page Router 取决于您应用程序的特定导航需求。一般来说，对于应用程序级别的导航（例如全局布局更改或身份验证检查），App Router 是一个更好的选择。对于页面特定的导航（例如在博客文章之间移动），Page Router 更加合适。
常见问题解答
Q1：App Router 和 Page Router 之间的主要区别是什么？
A1：App Router 负责应用程序范围内的导航，而 Page Router 负责页面特定的导航。
Q2：可以在页面组件中使用 App Router 吗？
A2：不，App Router 只能在 pages/_app.js 文件中使用。
Q3：Page Router 中的动态路由参数如何工作？
A3：动态路由参数允许您在路由中使用变量，从而能够处理特定路径。
Q4：如何获取当前路由的信息？
A4：您可以使用 router.asPath 属性获取当前路由的路径，并使用 router.query 获取任何查询参数。
Q5：如何使用预取在 Next.js 中优化导航？
A5：App Router 提供了 getInitialProps 方法，可用于预取数据并在客户端渲染之前加载它。
结论
Next.js 路由系统为开发人员提供了强大的工具，可以轻松构建高度动态且交互式的单页应用程序。通过了解 App Router 和 Page Router 的区别并适当使用它们，您可以创建流畅且用户友好的导航体验。从应用程序范围内的布局更改到页面特定的内容过渡，Next.js 路由让您掌控应用程序导航，为您打造一流的用户体验铺平了道路。
