React Redux问题：App组件connect正常，路由子组件映射函数无响应

我来帮你排查这个问题——你说主App组件用connect没问题，但嵌套在路由里的Login组件的mapState和mapDispatch完全没执行，这种情况通常是以下几个常见原因导致的：

1. 路由组件没有被Redux Provider完整包裹 #

这是最常见的坑！如果你的路由体系（比如BrowserRouter）没有放在Redux的<Provider>组件内部，那么路由渲染的Login组件根本无法访问Redux store，connect自然不会触发任何逻辑。

正确的入口文件结构应该是这样的：

// index.js 项目入口
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import store from './store'; // 你的Redux store
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

一定要确保所有需要用Redux的组件（包括路由渲染的组件）都在<Provider>的范围内。

2. 路由组件的渲染方式错误 #

如果你的App组件里用React Router的<Route>渲染Login，要注意这几点：

• 确保你导入的Login是已经被connect包裹后的组件（你的代码里Login已经导出了connect后的版本，这步应该没问题，但可以检查导入语句是否正确）。
• 如果是React Router v6版本，要使用element属性而不是旧的component：

  // React Router v6 正确写法
  <Route path="/login" element={<Login />} />
  
  // 旧版本（v5及以下）写法
  <Route path="/login" component={Login} />
  

  用错属性会导致组件渲染异常，connect无法正常工作。

3. 检查高阶组件的包裹顺序（针对旧版React Router） #

如果你在Login组件里用了withRouter（React Router v6已经废弃这个API），要确保connect是最外层的包裹：

// 正确顺序：先包裹withRouter，再用connect
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Login));

反过来的话，可能会导致Redux的连接逻辑被干扰。

4. 避免在组件内部动态创建connect组件 #

不要在Login的render方法或者其他内部逻辑里动态执行connect，比如：

// 错误示例：每次render都会创建新的连接组件，不会正常工作
const ConnectedLogin = connect(...)(Login);
return <ConnectedLogin />;

connect应该在组件定义的外部执行，像你现在的代码那样导出连接后的组件就对了。

总结 #

先优先检查Provider的包裹范围，这是90%以上这类问题的根源。如果确认Provider没问题，再排查路由的渲染方式和版本兼容问题。你的Login组件的connect写法本身是正确的，大概率是外部的包裹或路由配置出了问题。

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