无法从 React Router 4 嵌套路由中的 Redux Connect() 获取道具

Question

我正在尝试从嵌套路由中的 Redux connect() 访问道具。但不能让它工作..

我有以下组件：

main.js const initState = {};

const history = createBrowserHistory();
const store = configureStore(initState, history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

在 app.js 中我设置了几条路线

class App extends Component {
  render() {
    return (
      <Switch>
        <Route path="/auth" component={Auth} />
        <Route exact path="/" component={Home} />
      </Switch>
    );
  }
}

export default withRouter(App);

然后在 Auth 组件中

function Auth(props) {
  return (
    <div>
      <Route exact path={`${props.match.path}/login`} component={Login} />
    </div>
  );
}
export default withRouter(Auth);

最后是我的登录组件

export class Login extends Component {
  login({email, password}) {
    this.props.login({ email, password });
  }

  render() {
    return (
      <Form
        onSubmit={(credentials) => this.login(credentials)} />
    );
  }
}

Login.propTypes = {
  login: PropTypes.func
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (credentials) => dispatch(loginRequest(credentials))
  };
}

export default connect(null, mapDispatchToProps)(Login);

触发this.props.login({ email, password }); 应该调度我的loginRequest(credentials) 操作。

但是我收到this.props.login is not a function 错误。实际上我的登录组件中没有设置任何道具..connect() 似乎根本没有效果。

父母可以访问connect()注入的props，但是这个2级路由，不能得到它应该收到的props..

我希望它足够清楚..我错过了什么吗？有什么可能出问题的想法吗？

感谢您的帮助！

Answer 1

在从export class Login extends Component { 定义逻辑类时删除export，并确保将逻辑作为默认组件导入，例如import Login from '/path/to/Login

class Login extends Component {
  login({email, password}) {
    this.props.login({ email, password });
  }

  render() {
    return (
      <Form
        onSubmit={(credentials) => this.login(credentials)} />
    );
  }
}

Login.propTypes = {
  login: PropTypes.func
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (credentials) => dispatch(loginRequest(credentials))
  };
}

export default connect(null, mapDispatchToProps)(Login);