Next.js中not-found.js触发方式详解

在 Next.js 中,not-found.js 文件用于定义 404 页面。Next.js 提供了全局和局部两种触发 404 页面的方式。以下是它们的详细讲解和区别:

1. 全局触发 404 页面

定义全局 404 页面

在 Next.js 项目中,你可以在 app 目录下创建一个名为 not-found.js 的文件来定义全局的 404 页面。这个页面会在用户访问不存在的路由时自动显示。

文件路径:

复制代码
app/not-found.js

示例代码:

jsx 复制代码
export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}
触发方式

全局 404 页面会在以下情况下自动触发:

  • 用户访问的路由在 app 目录下没有对应的页面文件。
  • 用户访问的路由在 pages 目录下没有对应的页面文件(如果你同时使用了 apppages 目录)。

2. 局部触发 404 页面

定义局部 404 页面

局部 404 页面是指在特定的路由或页面中手动触发 404 页面。你可以在任何页面或组件中通过调用 notFound() 函数来触发 404 页面。

示例代码:

jsx 复制代码
import { notFound } from 'next/navigation';

export default function Page({ params }) {
  const { id } = params;

  if (id === 'invalid-id') {
    notFound();
  }

  return (
    <div>
      <h1>Page Content</h1>
      <p>This is a valid page.</p>
    </div>
  );
}
触发方式

局部 404 页面会在以下情况下触发:

  • 你在页面或组件中手动调用了 notFound() 函数。

3. 全局触发和局部触发的区别

特性 全局触发 404 页面 局部触发 404 页面
触发条件 自动触发,当访问的路由不存在时 手动触发,通过调用 notFound() 函数
定义位置 app/not-found.js 任何页面或组件中
适用场景 适用于整个应用的 404 页面 适用于特定页面或条件下的 404 页面
灵活性 较低,适用于通用的 404 页面 较高,可以根据特定条件自定义 404 页面

4. 总结

  • 全局触发 的 404 页面适用于整个应用,当用户访问不存在的路由时自动显示。
  • 局部触发 的 404 页面适用于特定页面或条件,通过手动调用 notFound() 函数来触发。

根据你的需求,你可以选择使用全局触发、局部触发,或者两者结合的方式来处理 404 页面。

相关推荐
前端菜鸟日常5 分钟前
pako处理 urlencode(gzcompress(json_encode($res))) php的加密方式web解析
前端
大厂码农老A1 小时前
P10老板一句‘搞不定就P0’,15分钟我用Arthas捞回1000万资损
java·前端·后端
拜无忧1 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
星海穿梭者1 小时前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手1 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i1 小时前
关于浏览器 Cookie 共享机制的学习与梳理
前端
文心快码BaiduComate1 小时前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin1 小时前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍2 小时前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端
江城开朗的豌豆2 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序