React Router + Redux: history is undefined - reactjs

Question

I have the following component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { logoutUser } from '../actions';
class NavBar extends Component {
onLogoutClick() {
this.props.logoutUser();
this.props.history.push('/login'); // here is the issue
}
render() {
return (
<div>
<button
className="btn btn-danger pull-xs-right"
onClick={this.onLogoutClick.bind(this)}
>
Logout
</button>
</div>
);
}
}
export default connect(null, {logoutUser})(NavBar);
I get this error in the console:
Cannot read property 'push' of undefined
Why doesn't this component have history in its props ?
Update 1
This is my App.js which hosts BrowserRouter:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
import reducers from './reducers';
import LoginForm from './components/login_form';
import NavBar from './components/nav_bar';
import Homepage from './components/home_page';
import PrivateRoute from './components/private_route';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<PrivateRoute exact path="/" component={Homepage} />
<Route exact path="/login" component={LoginForm} />
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
and this is the PrivateRoute:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import Homepage from './home_page';
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
<Component {...props} />
props.location } }} />
)} />
)
export default PrivateRoute;
and Homepage.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import NavBar from './nav_bar';
export default class HomePage extends Component {
render() {
return (
<div>
<NavBar />
<h1>Welcome to the homepage</h1>
</div>
);
}
}
Update 2
I also have LoginForm component which is more or less the same as the previous component, but it works fine:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { loginUser } from '../actions';
import validator from 'validator';
class LoginForm extends Component {
renderField(field) {
//....
}
onSubmit(values) {
this.props.loginUser(values, () => {
this.props.history.push('/');
});
}
render() {
const {handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
name="username"
label="Username"
component={this.renderField}
/>
<Field
name="password"
label="Password"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary">Enter</button>
</form>
);
}
}
function validate(values) {
const errors = {};
return errors;
}
export default reduxForm({
validate,
form:'LoginForm'
})(
connect(null, { loginUser })(LoginForm)
);

Answer 1

You need to decorate your component with withRouter
eg. add to the top:
import { withRouter } from 'react-router';
and change your export to:
export default withRouter(connect(null, {logoutUser})(NavBar));
This will give you the react router props.
See https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md