React-Router-Redux路由报错：Element type is invalid问题求助

嘿，我看到你在配置路由时碰到了这个头疼的错误，我帮你梳理下几个最可能的原因和对应的解决办法：

1. 优先排查SignUp组件的导入导出匹配问题 #

你代码里用的是import SignUp from '../../screens/SignUp';——这是默认导入，也就是说你的SignUp组件文件必须用默认导出才能正确加载。

如果你的SignUp.js里是这样写的（命名导出）：

// 错误示例：命名导出
export const SignUp = () => {
  // 组件内容
};

那你有两个修正方向：

• 把组件改成默认导出：

const SignUp = () => {
  // 组件内容
};
export default SignUp;

• 或者把导入改成命名导入：

import { SignUp } from '../../screens/SignUp';

这个是这类错误最常见的诱因，先优先检查这个！

2. 检查react-router-redux的ConnectedRouter是否有效 #

react-router-redux这个包已经被官方弃用了，现在官方推荐用connected-react-router来配合Redux管理路由历史。如果你的项目里装的是旧版react-router-redux，很可能和当前的react-router-dom版本不兼容，导致ConnectedRouter无法被正确导入（变成undefined），进而触发这个错误。

解决步骤：

• 先卸载旧包：

npm uninstall react-router-redux

• 安装替代包：

npm install connected-react-router

• 然后修改导入语句（同时要确保你的Redux store已经按照connected-react-router的文档配置了对应的中间件和reducer，这一步不能少）：

import { ConnectedRouter } from 'connected-react-router';
// 其他导入保持不变

3. 核对React Router版本的API兼容性 #

如果你的react-router-dom是v6版本，那Switch已经被替换成Routes，而且Route的component属性也改成了element，正确写法应该是：

<Routes>
  <Route path="/login" element={<SignUp />} />
  <Route path="/" element={<SignUp />} />
</Routes>

不过这种情况下用Switch会直接报另一个错误，所以这个可能性相对低，但也可以检查下你的react-router-dom版本是否和代码写法匹配。

快速排查顺序 #

建议你按照这个顺序排查：

• 先确认SignUp组件的导出和导入完全匹配
• 再检查react-router-redux的问题，换成connected-react-router
• 最后核对React Router版本的API

内容的提问来源于stack exchange，提问作者Noelia Belen Lopez