プッシュ機能は内部では動作しません

Question

私のコンポーネントと動作にはほとんど問題がありません。 私のコンポーネントの中で私は（ログイン、パスワード）を渡して認証します。それからアクションクリエイターで私は私のサーバーにポストリクエストを行い、ステータスが200で、ユーザーを他のパス、例えば "/"にプッシュしたいが、これはうまくいかない。

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import * as actions from '../../actions'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

class Signin extends Component{ 

constructor(props){ 
super(props); 
this.state= {}; 
this.onSubmit = this.onSubmit.bind(this); 
} 

renderField(field){ 
    return(
    <div className="form-group"> 
     <label>{field.label}</label> 
     <input 
      className="form-control" 
      type="text" 
      {...field.input} 
      /> 

    </div> 
    ); 
} 

onSubmit(e){ 
    e.preventDefault(); 
    let {username,password} = this.state; 
    this.props.actions.signinUser({username,password}); 
    this.setState({ 
     username: '', 
     password: '' 
    }) 
} 




render(){ 
    let {username,password} = this.state; 


    return(
     <form onSubmit={this.onSubmit}> 

      <Field 
       label="Username:" 
       name="username" 
       component={this.renderField} 
       onChange={e => this.setState({username: e.target.value})} 
      /> 
      <Field 
       label="Password:" 
       name="password" 
       component={this.renderField} 
       onChange={e => this.setState({password: e.target.value})} 
      /> 
      <button action="submit" className="btn btn-primary"> Sign In 
</button> 
     </form> 

    ); 
} 
} 


function mapStateToProps(state) { 
return { form: state.form }; 
} 

const mapDispatchToProps = (dispatch)=> { 
return { 
    actions : bindActionCreators(actions , dispatch) 
}; 
} 

Signin = connect(
mapStateToProps, 
mapDispatchToProps 
)(Signin); 

export default reduxForm({ 
form: 'signin' 
})(Signin); 

---

import axios from 'axios'; 



export function signinUser({username,password}){ 
return function(dispatch){ 

    axios.post('http://localhost:8585/auth', { username, password}) 
    .then(response => { 

      this.context.history.push('/'); or history.push('/'); 
      also tried `this.props.history`? 

     localStorage.setItem('token', response.data.token); 
     console.log("ok"); 

     }) 
     .catch(() => { 
     console.log("not ok"); 
     }); 
    }; 

} 

---

class App extends Component { 
render() { 
return (
    <Router> 
     <div className="container"> 
     <Header /> 
     <Route exact path="/" component={Home} /> 
     <Route path="/signin" component={SignIn} /> 
     <Route path="/about" component={About} /> 
    </div> 
    </Router> 
); 
} 
} 

---

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore,applyMiddleware } from 'redux'; 

import './index.css'; 
import App from './components/App'; 
import registerServiceWorker from './registerServiceWorker'; 
import reducers from './reducers'; 
import reduxThunk from 'redux-thunk' 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 


ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}> 
<App /> 
</Provider> 

, document.getElementById('root')); 
registerServiceWorker(); 

任意のアイデア？私は反応ルータv4を使用しています。

私は多くのことを試みました（独自の履歴を作成する）、コンポーネントからアクションへの小道具の機能を渡しました。そして、まだ仕事をしないでください。BrowserRouterにすべてを置く必要があります。

Answer 1

以下のコードを確認してください。

<Provider store={configureStore()}> 
    <BrowserRouter> 
     <LocaleProvider locale={enUS}> 
      <Route path='/' component={App} /> 
     </LocaleProvider> 
    </BrowserRouter> 
</Provider> 

あなたは歴史を取得し、this.props.history.push（ 'you_path'）を使用してプッシュ（）を使用します。

チェックReact Router Documentation。