リダイレクトは、私は自分の行動で、この場所について行くのいくつかの方法を試してみたルータ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

使用次のようにルータが自分のコンポーネントに{ match, history, location }を提供するように反応するからwithRouter HOCを必要とするなら、私を知ってみましょう。三番目の引数としてhistoryを受け入れる

import { withRouter } from "react-router"; 

... 

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

変更getLogin。 export function getLogin(data, dispatch, history) { ... }

then非同期処理の方法では、現在の場所を変更するのにhistory.push()またはhistory.replace()を使用できます。 <Redirect />は内部でhistory.replace()を使用します。

ここでhistoryモジュールについて読むことができます。これは、React Routerによって内部的に使用されているものです。

EDIT：あなたの現在の設定ではあなたのコメントへの応答...

では、あなたのmapDispatchToProps提供onSubmit小道具を通じてgetLoginにhistoryを渡す必要があります。

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"