Question

我正在使用connected-react-router 4，并在等待成功的身份验证后尝试调度推送操作以更改路由。

Routes.js：

export default () =>
  <Switch>
    <Route exact path="/login" component={Login} />
    <ProtectedRoute exact path="/todos" component={Todos} />
    <Route component={Missing} />
  </Switch>;

Protected.js：

const ProtectedRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    rest.signedInUser ? <Component {...props} /> : <Redirect to='/login' />
  )} />
);

const mapStateToProps = state => {
  return {
    signedInUser: state.auth.signedInUser
  };
};

export default connect(mapStateToProps, null, null, { pure: false })(ProtectedRoute);

App.js：

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <PersistGate persistor={persistor}>
            <Routes />
          </PersistGate>
        </ConnectedRouter>
      </Provider>
    );
  }
}

actions.js：

export async function login(form, dispatch) {

  try {
    await Auth.signIn(form.email, form.password);

    dispatch(reset('LoginForm'));
    dispatch(setSignedInUser(form));
    dispatch(push('/todos'));
  } catch (e) {
    console.log(e.message);
  }
}

当我使用await调用调用登录操作时，表单将重置，store中的signInInUser将更新，而url将更新为/ todos。但是，不会删除登录组件，因此不会呈现todos组件。但是，当我删除await调用时，todos组件将按预期方式呈现。

请注意，登录操作在使用redux-form的handleSubmit中用作提交功能，因此分派作为参数出现。

非常感谢您的帮助。

Connected-React-Router：在操作创建者中等待异步调用后，push更改URL，但不更改组件

0 个答案: