フォームの提出が成功するとリダイレクト

Question

私は教育目的で単純なフォームロジックを実装しようとしています。フォームの提出時にURLにリダイレクトしようとしています。ここに私のコードの関連セクションです。

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 

import { createStore, combineReducers, applyMiddleware } from 'redux' 
import { Provider } from 'react-redux' 
import { Router, Route, IndexRoute, hashHistory } from 'react-router' 
import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux' 
import { reducer as formReducer } from 'redux-form' 

import {Home, Foo, Bar} from './components' 
import {YirtibatLoginForm as LoginForm} from './containers/LoginForm' 

import * as reducers from './reducers' 

const reducer = combineReducers({ 
     ...reducers, 
    routing: routerReducer, 
    form: formReducer 
}) 

const middleware = routerMiddleware(hashHistory) 

const store = createStore(reducer, applyMiddleware(middleware)) 
const history = syncHistoryWithStore(hashHistory, store) 



ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
      <Route path="foo" component={Foo} /> 
      <Route path="bar" component={Bar} /> 
      <Route path="login" component={LoginForm} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

containers/LoginForm.js

import React, { Component } from 'react'; 

import { connect } from 'react-redux' 
import { push } from 'react-router' 

import LoginForm from '../components/LoginForm' 

export class BaseYirtibatLoginForm extends Component { 
    constructor() { 
     super(); 

     this.handlesubmit = this.handlesubmit.bind(this); 
    } 

    handlesubmit(ev) { 
     this.props.submitting(); 

     fetch('/login', { 
      method:'POST', 
      body:JSON.stringify(ev) 
     }).then(resp => { 
      if(!resp.ok) { 
       throw new Error(resp.statusText) 
      } 
      return resp.json() 
     }).then(resjson => { 
      this.props.submitsuccess(resjson) 
     }).catch(err => { 
      this.props.submiterror(err); 
     }) 
    } 

    render() { 
     return (
      <LoginForm onSubmit={this.handlesubmit} /> 
     ); 
    } 
} 

const mapStateToProps = (state) => {return {}} 
const mapDispatchToProps = (dispatch) => { 
    return { 
     submitting:() => dispatch({type:'submitting'}), 
     submitsuccess: (data) => push("/success"), 
     submiterror: (err) => push("/error") 
    } 
} 

export const YirtibatLoginForm = connect(mapStateToProps, mapDispatchToProps)(BaseYirtibatLoginForm); 

私は、このコードは、フォームが送信された後にハッシュURLをリダイレクトするはずだと思います。しかし、私はブラウザのコンソールで次のエラーが発生しています。

Uncaught (in promise) TypeError: (0 , _reactRouter.push) is not a function 
    at Object.submiterror (LoginForm.js:45) 
    at LoginForm.js:29 
submiterror @ LoginForm.js:45 
(anonymous) @ LoginForm.js:29 

提出イベントの後にルートコンポーネントにリダイレクトするのはどのような方法ですか？

Answer 1

react-routerによってエクスポートされたpush機能はありません。コメントに記載されているように、ヒストリオブジェクトを直接操作することもできますが、最も良い方法はwithRouter higher-order componentを使用することです。以下のコードは、インラインコメントでキーポイントに触れています。

// import 
import { withRouter } from 'react-router' 
... 

export class BaseYirtibatLoginForm extends Component { 
    ... 
    handlesubmit(ev) { 
     this.props.submitting(); 


     fetch('/login', ... 
     ).then(resjson => { 
      // take `router` from `this.props` and push new location 
      this.props.router.push("/success") 
     }).catch(err => { 
      // take `router` from `this.props` and push new location 
      this.props.router.push("/error") 
     }) 
    } 
} 

const mapStateToProps = (state) => {return {}} 
const mapDispatchToProps = (dispatch) => { 
    return { 
     submitting:() => dispatch({type:'submitting'}), 
     // redirect is not done through redux actions 
    } 
} 

// apply withRouter HoC 
export const YirtibatLoginForm = withRouter(connect(mapStateToProps, mapDispatchToProps)(BaseYirtibatLoginForm));