无法在 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() 好像一点效果都没有..

parents 可以访问 connect() 注入的道具，但是这个二级路由无法获得它应该接收的道具..

我希望它足够清楚..我错过了什么吗？知道会出什么问题吗？

感谢您的帮助！

Answer 1

从 export class Login extends Component { 定义逻辑 class 时删除 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);

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

Can't get props from Redux Connect() in React Router 4 nested route

reactjs

react-redux

react-router-redux

react-router-v4