重定向與之反應路由器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"