React-admin中CustomRoutes组件报错：[Route]非<Route>组件问题

核心原因 #

报错[Route] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>的本质是：你导入的Route组件和react-admin内部使用的Route不是同一个实例，通常由以下两种情况导致：

• 项目中安装了多个版本的react-router-dom
• 直接从react-router-dom导入Route，而非使用react-admin提供的兼容版本

解决方案 #

方案1：从react-admin导入Route组件 #

将代码中import { Route } from "react-router-dom";替换为：

import { Route } from 'react-admin';

react-admin会导出它内部依赖的react-router-dom组件，这样能确保你使用的Route和react-admin内部的Routes是兼容的同一版本。

方案2：统一react-router-dom版本 #

1. 确认react-admin要求的react-router-dom版本（react-admin v4要求^6.3.0）
2. 在项目根目录执行命令强制统一版本：

npm install react-router-dom@匹配版本号
# 或使用yarn
yarn add react-router-dom@匹配版本号

3. 删除node_modules和package-lock.json/yarn.lock，重新安装依赖

额外检查 #

如果你的react-admin版本是v3，不支持<CustomRoutes>组件，需要通过customRoutes props配置自定义路由：

// react-admin v3 写法示例
<Admin
  customRoutes={[
    <Route path="/settings" component={Settings} />
  ]}
>
  {/* ...其他配置 */}
</Admin>

内容的提问来源于stack exchange，提问作者Gergő Kovács