404页面是服务器返回“资源未找到”状态码时展示的友好提示页，需明确告知用户页面不存在、保持http 404状态码、提供有效导航，并区分路由级与数据级404以精准响应。
在 Web 应用中，捕获所有未定义的路由并返回一个友好的 404 页面，是提升用户体验和 SEO 的基本实践。关键不在于“兜底”，而在于明确告诉用户“资源不存在”，同时保持应用状态稳定、不崩溃、不跳转错误页面。
确保 404 路由放在路由配置末尾
大多数前端路由库（如 React Router、Vue Router、Express）都按顺序匹配路由。如果把通配路由（如 /\* 或 \*\*）写在前面，它会提前拦截所有请求，导致其他路由失效。
- React Router v6：使用
} />，且必须作为最后一个 Route - Vue Router：添加 { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }，放在 routes 数组最后
- Express：在所有 app.get() 之后，加 app.use((req, res) => res.status(404).render('404'))
服务端也要同步处理（避免 SPA 的 404 陷阱）
单页应用（SPA）依赖前端路由，但用户直接访问 https://site.com/abc 时，请求首先到达服务器。若 Nginx/Apache/Node.js 没有正确回退到 index.html，就会返回真正的 404 状态码（HTTP 404），搜索引擎可能误判为内容缺失。
- Nginx：在 location 块中添加 try_files $uri $uri/ /index.html;
- Vercel/Netlify：默认支持，无需额外配置
- 自建 Express：在静态文件中间件后加 app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))，但注意——这仅适用于前端路由兜底，真正的 404 仍需由前端组件判断并渲染
让 404 页面真正“优雅”：不只是样式好看
一个高质量的 404 页面应兼顾功能、可访问性和语义化：
- 返回标准 HTTP 状态码 404（服务端渲染或 SSR 场景下必须；纯 CSR 可通过 document.title = "404 Not Found" 和 meta 标签辅助）
- 提供清晰文案：“抱歉，您访问的页面不存在”，避免技术术语或幽默梗（影响可信度）
- 包含实用导航：首页链接、搜索框、最近浏览或分类入口（可选）
- 确保键盘可访问：焦点能进入主按钮，跳过导航快捷键（skip link）可用
- 轻量加载：不引入额外 JS/CSS，404 页面本身应快速渲染
进阶：区分“路由不存在”与“数据不存在”
不是所有 404 都该走兜底页。例如 /post/999 路由存在，但 ID=999 的文章已被删除——这是数据层 404，应由组件内请求失败触发，显示“文章已下线”，而非跳转全局 NotFound 页面。
- 路由级 404：URL 完全不匹配任何 path，交由最外层路由处理器
- 数据级 404：路由匹配成功，但 API 返回 404 或空数据，应在页面组件内处理并展示定制提示
- 两者状态码都应为 404，但用户感知和交互路径不同
