重定向与之反应路由器V3

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('/')); 
    // }) 
    }) 
} 

我甚至看到一些关于使用渲染属性在路由器上作用于路由器。

现在我想根据我的状态是否是真的还是假的使用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

使用withRouter特别从阵营路由器提供{ 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"