如何在使用Qwik-City插件的Qwik中覆盖默认404页面？

在Qwik City里实现自定义404页面非常直接，无需复杂配置：

• 在项目的src/routes目录下创建一个名为404.tsx（若使用JavaScript则创建404.jsx）的组件文件
• Qwik City会自动将这个组件识别为404错误页面，当用户访问不存在的路由时，会自动渲染该组件内容

以下是一个基础的404页面示例：

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
      <h1 style={{ fontSize: '3rem', fontWeight: 'bold' }}>404 - 页面未找到</h1>
      <p style={{ marginTop: '1rem' }}>你访问的页面不存在，请确认网址是否正确。</p>
    </div>
  );
});

如果需要处理更多类型的HTTP错误（如500等），可以在src/routes下创建error.tsx文件，通过useLocation()获取错误状态码来做区分处理，但针对单纯的404场景，单独创建404.tsx是最简洁的方案。

内容的提问来源于stack exchange，提问作者Rafael Zasas