React组件能否以数字命名？创建404组件编译失败求助

Hey there! Let's break down your two questions one by one—happy to help out with your React + React Router setup using create-react-app.

1. 能不能用数字给React组件命名？ #

Short answer: 不建议，而且通常会引发语法/编译问题。

React组件本质是JavaScript函数或类，而JavaScript的标识符规则明确规定：不能以数字开头。所以像404这样纯数字的组件名（或者文件名以数字开头）会直接违反JS语法规范，导致Babel或ESLint报错。

如果你想关联“404”这个语义，推荐用更规范的命名方式：

• 驼峰式命名：NotFound、Error404
• 下划线前缀：_404（虽然语法上允许，但不符合React社区的命名惯例，不推荐）

React官方也建议组件名使用大写开头的驼峰命名，这样不仅符合语法要求，也能让代码更易读、更规范。

2. 为什么404组件无法编译？ #

结合你用create-react-app和React Router的环境，大概率是组件命名/文件名不符合语法规范导致的，下面是具体的排查和解决步骤：

步骤1：修正组件文件名与组件名 #

把你的纯数字文件名（比如404.jsx）改成符合规范的名字，比如NotFound.jsx，然后在组件文件里定义对应的组件：

// NotFound.jsx
export default function NotFound() {
  return (
    <div className="not-found">
      <h1>404 - Page Not Found</h1>
      <p>Oops! The page you're looking for doesn't exist.</p>
    </div>
  );
}

步骤2：在React Router中正确配置404路由 #

用path="*"来匹配所有未被前面路由匹配到的路径，指向你的404组件：

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 404路由要放在最后！ */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

⚠️ 注意：404路由一定要放在所有路由的最后，否则会提前匹配到其他路由。

步骤3：检查导出/导入是否正确 #

确保组件是默认导出（如上例的export default function NotFound()），导入时不需要加花括号；如果用命名导出，要保持导入导出一致：

// 命名导出方式
export function NotFound() { ... }

// 对应导入
import { NotFound } from './NotFound';

其他可能的排查点 #

• 检查create-react-app的ESLint提示：如果编译报错，查看终端里的错误信息，通常会明确指出“标识符不能以数字开头”这类问题。
• 重启开发服务器：有时候修改文件名后，create-react-app的热重载可能没生效，重启npm start试试。

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