Redirect on successful form submission - reactjs

Question

I am trying to implement a simple form logic for educational purposes. I am stuck trying to redirect to url on form submission. Here are relevant sections of my code;
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);
I think this code supposed to redirect hash url after the form has been submitted. However I am getting following error in browser console;
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
What is the prefered method to redirect to a route component after for submission events?

Answer 1

There is no push function exported by react-router. You could work with the history object directly, as mentioned in the comments, but the best way is to use the withRouter higher-order component. The code below touches the key points with inline comments.
// 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));