Next.js中的App Router与Page Router,各自的作用和使用方式,如何理解和配置使用?

news2024/11/10 16:10:09

App Router介绍

Next.js中的App Router是全局的路由器,它用于在应用程序的所有页面之间进行导航。它可以用于在页面之间传递状态和数据,类似于React中的Context。 App Router是通过_app.js文件中的getInitialProps方法来配置的。

在 Next.js 中,App Router 是指导整个应用程序路由行为的基本机制。它实际上是基于文件系统的路由系统,该系统会根据您项目中 pages 文件夹的结构自动生成路由。

1. 了解 App Router 工作原理

 

  1. 基于文件系统的路由:Next.js 的路由系统直接映射到您在 pages 文件夹中创建的文件和文件夹。每个文件都对应一个页面,文件路径定义了页面的 URL 路径。

  2. 约定优于配置:不需要特殊的配置文件来设置路由。按照约定,pages 文件夹中的文件和文件夹结构定义了应用程序的路由结构。

  3. 动态路由支持:Next.js 支持动态路由,您可以使用带有方括号 [] 的文件名来创建动态路由。例如,pages/post/[id].js 对应于 /post/:id 路径。

  4. 预渲染和服务端渲染:Next.js 支持静态生成、服务器端渲染和客户端渲染,根据需要对页面进行预渲染,从而实现更好的性能和 SEO。

2. 如何通过目录或配置文件设置 App Router

在 Next.js 中,您不需要特殊的配置文件来设置 App Router。它是基于文件系统的,所以您只需在 pages 文件夹中按照惯例组织您的文件即可。但是,您可以使用特殊的文件名来创建一些特定的路由。

  • _app.js:全局性的应用程序组件,可以进行一些全局配置和设置,如上一个回答中所提及的。

在 Next.js 中,_app.js 是一个特殊的文件,用于对应用程序进行自定义配置和包装。如果您使用的是函数式组件,可以通过自定义 _app.js 文件来配置全局性的内容,例如添加布局、引入全局 CSS 样式、设置全局数据获取等。

以下是一个使用函数式组件的 _app.js 的示例,展示了一些最佳的自定义配置建议:

// _app.js
import '../styles/globals.css'; // 引入全局样式
import { Provider } from 'react-redux';
import { store } from '../store/store'; // 导入 Redux Store
import Layout from '../components/Layout'; // 引入全局布局组件
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 在页面切换时执行一些全局操作
    const handleRouteChange = (url) => {
      // 每次页面切换时执行的操作
      console.log('路由变化:', url);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return (
    <Provider store={store}>
      <Layout>
        {/* 将每个页面组件作为 Component 属性传递 */}
        <Component {...pageProps} />
      </Layout>
    </Provider>
  );
}

export default MyApp;

配置建议解释:

  1. 全局样式

    _app.js 中引入全局 CSS 样式,这样它们将应用于整个应用程序。
  2. Redux Provider

    使用 Provider 包裹整个应用程序,使得所有页面都可以访问到 Redux 的状态。
  3. 全局布局组件

    _app.js 中使用 Layout 组件包裹所有页面组件,确保每个页面都共享同样的布局。
  4. 页面切换监听

    使用 useRouter 钩子监听页面切换事件,可以在页面切换时执行一些全局操作,例如记录路由变化。

 

  • _document.js:用于自定义整个页面的文档结构(如 HTML、Head 等)。

  • _error.js:用于自定义错误页面。

3. 通过目录结构设置路由

假设您的 Next.js 项目目录结构如下:

- pages/
  - index.js
  - about/
    - index.js
  - posts/
    - [id].js

在这个例子中:

  • pages/index.js 对应于应用程序的根路径 /
  • pages/about/index.js 对应于 /about 路径。
  • pages/posts/[id].js 对应于 /posts/:id 动态路径。

通过这种文件夹结构,您可以轻松地组织和管理应用程序的不同页面,并使其对应到相应的 URL 路径。

注意事项:

  • 避免在 pages 目录下创建具有重复文件名的文件或目录,因为这可能会导致路由冲突。
  • 使用文件和文件夹的名称来定义路由,但可以通过文件内的内容来定义页面的行为和展示。

Page Router 介绍

Page Router 是指应用程序中负责管理页面路由的部分。它与 App Router 相关联,但主要涉及到单个页面的路由和导航。它在每个页面中使用next/router模块进行配置和使用。Page Router 是基于文件系统的,主要依赖于 pages 文件夹中的文件和文件夹结构。但是,您可以使用一些特殊的文件和文件夹命名约定来定义特定的页面路由,通过页面的文件名和目录结构来设置。例如,pages/about.js可以通过/about路由进行访问。同时,您也可以在页面组件内部使用动态路由参数来处理特定的路径。

1. 了解Page Router 的工作原理:

  1. 基于文件系统的路由

    • 页面路由在 Next.js 中是基于文件系统的。
    • 每个页面都对应 pages 文件夹中的一个文件。文件的路径决定了页面的 URL 路径。
  2. 文件命名约定

    • 文件名决定了页面的路径。例如,pages/index.js 对应于应用程序的根路径 /
    • 通过文件夹和文件的命名和组织,可以建立不同页面之间的路由关系。
  3. 动态路由

    • Next.js 支持动态路由,您可以使用 [] 括号来创建动态路由。
    • 例如,pages/post/[id].js 对应于 /post/:id 动态路径。这使得您可以在同一个页面处理多个不同参数的请求。
  4. 页面导航

    • 使用 <Link> 组件或 next/router 中的导航方法(例如 router.push()router.replace() 等)进行页面间的导航。

页面加载

Next.js 的页面路由不仅提供了客户端路由(在浏览器中进行导航),还支持服务器端渲染和静态页面生成。

  • 服务器端渲染 (SSR):根据用户的请求,服务器动态地生成页面的 HTML 内容,然后将其发送给客户端。
  • 静态页面生成 (SSG):在构建时预先生成页面,并将生成的 HTML 文件存储在服务器上,使得访问页面时可以直接提供静态内容,提高性能和 SEO。

2. 通过路径设置 Page Router:

在 Next.js 中,没有专门的配置文件来设置页面路由。路由主要依赖于文件和文件夹的组织结构。但是,您可以使用以下方式进行一些定制:

  1. 基本的文件命名规则

    • pages 文件夹中创建文件来定义页面,文件路径决定了页面的路由路径。
    • 例如,pages/index.js 对应于根路径 /pages/about.js 对应于 /about 路径。
  2. 动态路由

    • 使用 [] 方括号来创建动态路由,以处理带有可变参数的路径。
    • 例如,pages/posts/[id].js 对应于 /posts/:id 动态路径。
  3. 自定义页面的路径

    • 您可以通过更改文件系统中的 pages 文件夹的结构来定义页面的路径。
    • 例如,通过创建 pages/blog/[slug].js 文件来定义 /blog/:slug 路径下的页面。
  4. 使用特殊文件

    • 有一些特殊的文件名(以 _ 开头)可以用来定义特殊页面,如 _app.js_document.js_error.js
    • 例如,_app.js 用于自定义应用程序的外部样式和全局布局,_document.js 用于自定义整个页面的文档结构。
  5. 动态路由参数

    • 在页面组件中,您可以使用 next/router 中的 useRouter 钩子来访问路由对象,处理动态路径参数,并根据参数来渲染页面内容。

App Router 与Page Router之间的选择

在 Next.js 中,App Router 和 Page Router 都是路由系统的组成部分,但它们具有不同的作用和职责。选择和配置使用 App Router 和 Page Router 的准则通常取决于以下考虑因素:

App Router

  1. 全局性配置:App Router 位于 _app.js 中,用于管理整个应用程序的全局配置和布局,如设置全局样式、元数据、错误处理和页面间共享的布局组件等。

  2. 页面间共享逻辑:App Router 适合用于包装整个应用程序的顶级组件,它可以定义页面间共享的逻辑、布局和数据获取方法。

  3. 全局性路由操作:App Router 通常用于监听全局的路由变化,进行全局性的路由操作和错误处理,比如处理每次页面切换时的特殊逻辑或加载动画。

Page Router

  1. 单个页面的导航和渲染:Page Router 是 Next.js 中每个页面的路由定义,基于文件系统的结构,每个文件对应一个页面。

  2. 页面级别的路由逻辑:Page Router 适合用于处理特定页面的路由逻辑,包括处理页面参数、动态路由和页面内部导航等。

  3. 页面级别的特定行为:在页面级别上,您可以控制特定页面的导航、渲染和数据获取逻辑,根据需要定制页面的行为。

选择和配置的准则:

  1. 全局与局部:App Router 用于全局性配置和操作,Page Router 用于页面级别的路由操作。根据需要选择合适的上下文来定义路由逻辑。

  2. 共享和特定逻辑:如果存在多个页面共享的布局、样式或逻辑,则适合在 App Router 中定义。对于单个页面的特定路由逻辑和页面内导航,应使用 Page Router。

  3. 简单和复杂性:对于简单的页面导航和全局性配置,可以使用 App Router 简化操作。对于复杂的页面路由逻辑和特定页面行为,使用 Page Router 更为灵活。

  4. 按需选择:根据项目的实际需求,灵活选择使用 App Router 和 Page Router。有些情况下,两者可能会有一定重叠,但通常用于不同的目的。

 Next.js中参考目录结构(启用src目录):

- public
- src/
  - pages/    
    - index.js
    - about/
      - index.js
    ...
  - components/
    - Header.js
    - Footer.js
    ...
  - utils/
    - api.js
    ...
  - styles/
    - globals.css
    - globals.js
    ...
  - api/
    - users.js
    - posts.js
    ...
  - store/
    - actions/
      - actionTypes.js
      - exampleActions.js
    - reducers/
      - rootReducer.js
      - exampleReducer.js
    - store.js

- next.config.js
- package.json
...

 说明:

  1. components 目录

    存放应用程序的可重用组件,可以在多个页面中使用,有助于避免重复代码。
  2. pages 目录

    包含了应用程序的页面文件,每个文件对应一个页面路由。符合 Next.js 的约定。
  3. api 目录

    包含与后端 API 交互的代码文件,通常使用函数封装 API 请求。例如,users.jsposts.js 可以包含用户和帖子相关的 API 请求。
  4. styles 目录

    存放全局样式文件和组件特定的样式文件,如 globals.css 和其他全局性样式文件。
  5. store 目录(如果使用 Redux 或其他状态管理器):

    包含了状态管理相关的文件,如 actions、reducers 和 store 的配置。这些文件用于管理应用程序的状态。
  6. utils 目录

    存放通用的辅助函数或工具函数,用于整个应用程序中的工具性操作。

注意事项:

  • 模块化开发:将代码模块化组织,使其易于理解、测试和维护。
  • 命名和注释:使用清晰的命名和必要的注释,使得代码更易于理解。
  • 根据项目需求定制:以上结构是一种常见的推荐方式,但根据具体项目的需求和团队约定,您可以根据实际情况进行适当调整。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1304861.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

算法通关村第十三关—数学与数学基础问题(青铜)

数学与数学基础问题 一、统计专题 1.1 符号统计 LeetCode1822给定一个数组&#xff0c;求所有元素的乘积的符号&#xff0c;如果最终答案是负的返回-1&#xff0c;如果最终答案是正的返回1&#xff0c;如果答案是0返回0。  题目比较简单&#xff0c;正数对结果完全没影响&…

RK3568驱动指南|第八篇 设备树插件-第75章ConfigFS的核心数据结构

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

【Docker】进阶之路:(九)Docker网络

【Docker】进阶之路&#xff1a;&#xff08;九&#xff09;Docker网络 Docker网络模式简介bridge网络模式host网络模式none网络模式container网络模式user-defined网络模式1.创建自定义的bridge网络2.使用自定义网络 高级网络配置docker network命令 为什么要了解容器的网络模…

谈谈MYSQL主从复制原理

目录 概述 要点binlog日志 主从复制过程 总结 概述 MySQL 主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点。 MySQL 默认采用异步复制方式。从节点不用一直访问主服务器来更新自己的数据&#xff0c;数据的更新可以在远程连接上进行&#xff0…

Python应用利器:缓存妙用,让你的程序更出色更快速!

在 Python 应用程序中&#xff0c;使用缓存能够显著提高性能并降低资源消耗。本文将详细介绍如何在 Python 中实现缓存机制&#xff0c;包括内置 functools 模块提供的 lru_cache 装饰器以及自定义缓存机制。 使用 functools 模块的 lru_cache functools 模块提供了 lru_cach…

【CDP】CDP 集群通过Knox 访问Yarn Web UI,无法跳转到Flink Web UI 问题解决

一、前言 记录下在CDP 环境中&#xff0c;通过Knox 访问Yarn Web UI&#xff0c;无法跳转到Flink Web UI 的BUG 解决方法。 二、问题复现 登录 Knox Web UI 找到任一 Flink 任务 点击 ApplicationMaster 跳转 Flink WEB UI 出问题 内容空白&#xff0c;无法正常跳转到…

【MySQL】mysql | mysql5.7升级8.0注意事项

一、说明 1、应公司要求&#xff0c;mysql5.7安全漏洞较多&#xff0c;需要升级到8.0 2、记录注意事项备不时之需 二、注意事项 1、加密算法 1&#xff09;加密算法8.0改了&#xff0c;导致navicat无法连接 2&#xff09;解决&#xff1a; use mysql; ALTER USER root% IDENT…

利用冒泡排序了解如何将数组作为参数传递给函数

目录 前言:冒泡排序简介步骤动图演示 错误的冒泡排序函数数组名正确的冒泡排序函数 前言:冒泡排序 简介 冒泡排序是一种简单直观的排序算法。 它重复地访问要排序的数&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。访问数需要重复地进行直到…

DS冲刺整理做题定理(一)二叉树专题

&#xff08;只总结博主自己记得不熟的~&#xff09; 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技…

微服务——分布式事务

事务理论基础 分布式锁保证多线程下数据库操作安全保障 分布式事务发生异常可以回滚. 使用postman发送请求插入一条新订单。 然后现在库存只剩下8个商品&#xff0c;如果买10个的话应该统一失败。 CAP定理 假如node03在独立时将所有请求都堵塞并等待恢复和其余节点的连接的话以…

【Spring Boot】快速入门

一、引言 1、什么是spring boot&#xff1f; Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff…

【c++】stl_priority_queue优先级队列

目录 一、priority_queue的介绍 二、 priority_queue的本质 三、priority_queue的使用 四、priority_queue的模拟实现 总结 一、priority_queue的介绍 首先让我们通过阅读优先级队列的官方文档 简单翻译一下 1. 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准…

内存不够用怎么办?整理了几个必备的方法!

内存越大&#xff0c;运行越快&#xff0c;程序之间的切换和响应也会更加流畅。但是随着时间的增加&#xff0c;还是堆积了越来越多的各种文件&#xff0c;导致内存不够用&#xff0c;下面就像大家介绍三种好用的清理内存的方法。 方法一&#xff1a;通过电脑系统自带的性能清理…

关于Android studio新版本和NEW UI显示返回按钮的设置

1.新版Android studio问题 因为在新版本的Android Studio中&#xff0c;默认情况下是没有直接的选项来显示返回上一步按钮在状态栏上的&#xff0c;可以通过以下方法来实现返回上一步的功能&#xff1a; 在Android Studio的顶部菜单栏中&#xff0c;选择"View"。在…

量子纠错率提高100倍!亚马逊云科技开启量子创新时代

由AWS开发和制造的包装组件中的超导量子芯片&#xff08;图片来源&#xff1a;网络&#xff09; 作为一项尖端技术&#xff0c;量子计算能提供前所未有的计算能力。美国亚马逊云科技&#xff08;AWS&#xff09;近期推出了一款量子芯片&#xff0c;展示出该技术取得了重大飞跃…

为什么选择国产WordPress:HelpLook的优势解析

如今网站建设可以说已经是企业必备。而在众多的网站建设工具中&#xff0c;WordPress无疑是其中的佼佼者。作为一款开源的CMS&#xff08;内容管理系统&#xff09;&#xff0c;WordPress拥有丰富的插件和主题&#xff0c;以及强大的功能&#xff0c;使得用户可以轻松地构建出符…

golang 操作Jenkins

1.創建Agent/Node func CreateAgent(username string, password string, nodeName string, nodeDescription string, numExecutors string, remoteFS string, labelString string, host string) {var obj stringobj "{name:" nodeName ",nodeDescription:&q…

洛谷 P8802 [蓝桥杯 2022 国 B] 出差

文章目录 [蓝桥杯 2022 国 B] 出差题目链接题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 思路解析CODE [蓝桥杯 2022 国 B] 出差 题目链接 https://www.luogu.com.cn/problem/P8802 题目描述 A \mathrm{A} A 国有 N N N 个城市&#xff0c;编号为 1 … N …

抖音跑腿小程序开发指南:从零开始到上线

如今&#xff0c;抖音跑腿小程序的开发已经成为一项具有巨大潜力的领域。本文将为您提供一份详尽的开发指南&#xff0c;从零开始引导您完成一个成功的抖音跑腿小程序的开发和上线过程。 第一步&#xff1a;确定目标和需求 了解用户的期望&#xff0c;确定小程序的功能模块&a…

ROS-ROS通信机制-小乌龟

文章目录 1.话题发布2.话题订阅3.服务调用4.参数设置5.通信机制比较 1.话题发布 需求描述: 编码实现乌龟运动控制&#xff0c;让小乌龟做圆周运动。 实现分析: 乌龟运动控制实现&#xff0c;关键节点有两个&#xff0c;一个是乌龟运动显示节点 turtlesim_node&#xff0c;另…