404页面需确保状态准确（服务端返回HTTP 404）与体验友好（清晰提示+有效出口）。前端路由须兜底且置于末位，服务端需配置fallback（如Nginx try_files），并区分路由级与数据级404。
优雅处理 404 页面和未匹配路由，核心是两点：**状态准确、体验友好**。不是简单跳转或隐藏错误，而是让服务器返回真实的 HTTP 404 状态码（服务端渲染或 SSR 场景下必须），同时前端展示清晰提示、提供有效出口，并确保导航逻辑不中断。
前端路由必须兜底，且顺序放最后
所有主流前端路由库都按声明顺序匹配，通配路由一旦提前写入，就会吞掉其他路径。
-
React Router v6：用
<Route path="*" element={<NotFound />} />，必须放在<Routes>内最后一个位置 -
Vue Router：添加
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }，确保它在routes数组末尾 -
Fluro（Flutter）：通过
router.notFoundHandler指定组件，框架会在匹配失败时自动调用
服务端必须配合 fallback，否则真 404
用户直接访问 /about 时，请求先到服务器。若没配置，Nginx/Apache/Express 就会查磁盘上是否存在 ./about.html —— SPA 根本没生成这个文件，于是返回原始 HTTP 404，搜索引擎可能降权。
-
Nginx：在
location块中加try_files $uri $uri/ /index.html;，不改 URL、不跳转、保持状态码为 200，让前端路由读取原始路径 -
Netlify：在
netlify.toml中写重写规则：[[redirects]] from = "/*" to = "/index.html" status = 200 -
Express：静态资源中间件后加
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))，注意这只是前端接管的前提，真正的 404 渲染仍由前端组件完成
404 页面本身要真正“有用”
不只是画个插画加句“页面走丢了”。一个合格的 404 页面应做到：
- 标题设为
document.title = "404 Not Found"，并添加<meta name="robots" content="noindex">防止被收录 - 文案直白：“抱歉，您访问的页面不存在”，避免玩笑或技术术语
- 提供至少一个明确出口：返回首页按钮、站内搜索框、主导航链接（如产品、关于我们、帮助中心）
- 保持品牌视觉一致，但不要过度设计干扰信息传达
区分路由级 404 和数据级 404
两者不能混为一谈。比如访问 /user/999999，路由能匹配（/user/:id），但后端返回用户不存在 —— 这是数据级 404，应渲染“用户不存在”页面，HTTP 状态码仍是 200；而访问 /xyz 连路由都不匹配，才是真正的路由级 404，需返回 HTTP 404 状态码。
- 前端可结合
useLoaderData或组件内请求结果判断是否展示数据缺失页 - 服务端渲染时，数据加载失败应主动设置
res.status(404)，再渲染对应模板 - 避免把所有“找不到”都扔给通配路由，否则会掩盖真实的数据异常
