Question

我已经尝试了几种方法来解决这个问题，我的行动就是发送（推送）：

import LoginService from '../../services/login-service';

export const ActionTypes = {
  SET_LOGIN: 'SET_LOGIN',
}

export function getLogin(data, dispatch) {
  LoginService.getLoginInfo(data).then((response) => {
    const login = response.data;
    dispatch({
      type: ActionTypes.SET_LOGIN,
      login
    })
    // .then((res) => {
    //   dispatch(push('/'));
    // })
  })
}

我甚至看到了一些关于在路由器上使用render属性的事情。

现在我试图根据我的状态是真还是假来使用renderIf，但我似乎无法成功获得此页面上的道具：

import React from 'react';
import renderIf from 'render-if';
import { Redirect } from 'react-router-dom';
import LoginHeader from '../../components/header/login-header';
import LoginPage from './login-page';

const LoginHome = props => (
  <div>
    {console.log(props)}
    {renderIf(props.loginReducer.status === false)(
      <div>
        <LoginHeader />
        <LoginPage />}
      </div>)}
    {renderIf(props.loginReducer.status === true)(
      <Redirect to="/" />,
    )}
  </div>
);

export default LoginHome;

这是loginPage：

import React from 'react';
import { form, FieldGroup, FormGroup, Checkbox, Button } from 'react-bootstrap';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';
import { getLogin } from './login-actions';
import LoginForm from './form';
import logoSrc from '../../assets/images/logo/K.png';
import './login.scss'


class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      passwordVisible: false,
    }
    this.handleSubmit= this.handleSubmit.bind(this);
    this.togglePasswordVisibility= this.togglePasswordVisibility.bind(this);
  }

  togglePasswordVisibility() {
    this.setState((prevState) => {
      if (prevState.passwordVisible === false) {
        return { passwordVisible: prevState.passwordVisible = true }
      }
      else if (prevState.passwordVisible === true) {
        return { passwordVisible: prevState.passwordVisible = false }
      }
    })
  }

  handleSubmit(values) {
    this.props.onSubmit(values)
  }

  render () {
      return (
        <div id="background">
          <div className="form-wrapper">
             <img
              className="formLogo"
              src={logoSrc}
              alt="K"/>
              <LoginForm onSubmit={this.handleSubmit} passwordVisible={this.state.passwordVisible}
              togglePasswordVisibility={this.togglePasswordVisibility}/>
          </div>
        </div>
      )
  }
}

function mapStateToProps(state) {
  return {
    loginReducer: state.loginReducer,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onSubmit: (data) => {
      getLogin(data, dispatch);
    },
  };
}

export default connect (mapStateToProps, mapDispatchToProps)(LoginPage);

如果需要其他任何内容，请告诉我

Answer 1

使用React Router中的withRouter HoC为您的组件提供{ match, history, location }，如下所示;

import { withRouter } from "react-router";

...

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginPage));

修改getLogin以接受history作为第三个参数; export function getLogin(data, dispatch, history) { ... }

现在，在异步操作的then方法中，您可以使用history.push()或history.replace()来更改当前位置。 <Redirect />在内部使用history.replace()。

您可以在此处阅读history模块。这是React Router内部使用的。

编辑：回应你的评论......

根据您当前的设置，您需要通过history提供的getLogin道具将mapDispatchToProps传递到onSubmit。

function mapDispatchToProps(dispatch) {
  return {
    onSubmit: (data, history) => {
      getLogin(data, dispatch, history);
    },
  };
}

您的handleSubmit方法也需要更新。

handleSubmit(values) {
  this.props.onSubmit(values, this.props.history)
}

根据路由器的设置方式修改答案我必须使用hashHistory：react-router " Cannot read property 'push' of undefined"

使用react路由器v3成功执行异步操作后重定向

1 个答案: