Is react-router-dom have browser history in reactjs? - reactjs

Question

Is browserHistory contains in react-router-dom?? If it is not then how I can redirect to a page using history.push?
Here is my code, where to add changes in my code?
LoginForm.js
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {};
this.onSubmit = this.onSubmit.bind(this);
}
render() {
let {username, password} = this.state;
let {isLoginPending, isLoginSuccess, loginError} = this.props;
return (
<div>
<Back/>
<header>
<h1>Company Login</h1>
</header>
<form name="loginForm" onSubmit={this.onSubmit}>
<div className="imgcontainer">
<img src={avatar} alt={"Avatar"} className={"avatar"}/>
</div>
<div className="form-group-collection">
<div className="form-group">
<label>Username/User ID:</label>
<input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
</div>
</div>
<br/>
<input type="submit" value="Login" />
</form>
<footer>Copyright © multihands.com. </footer>
</div>
)
}
onSubmit(e) {
e.preventDefault();
let { username, password } = this.state;
this.props.login(username, password);
this.setState({
username: '',
password: ''
});
}
}
const mapStateToProps = (state) => {
return {
isLoginPending: state.isLoginPending,
isLoginSuccess: state.isLoginSuccess,
loginError: state.loginError
};
}
const mapDispatchToProps = (dispatch) => {
return {
login: (username, password) => dispatch(login(username, password))
};
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
Reducer.js
import logindetls from '../../logindet.json';
const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';
export function login(username, password) {
return dispatch => {
dispatch(setLoginPending(true));
dispatch(setLoginSuccess(false));
dispatch(setLoginError(null));
callLoginApi(username, password, error => {
dispatch(setLoginPending(false));
if (!error) {
dispatch(setLoginSuccess(true));
} else {
dispatch(setLoginError(error));
}
});
}
}
function setLoginPending(isLoginPending) {
return {
type: SET_LOGIN_PENDING,
isLoginPending
};
}
function setLoginSuccess(isLoginSuccess) {
return {
type: SET_LOGIN_SUCCESS,
isLoginSuccess
};
}
function setLoginError(loginError) {
return {
type: SET_LOGIN_ERROR,
loginError
}
}
function callLoginApi(username, password, callback) {
setTimeout(() => {
if (username === logindetls.username && password === logindetls.password)
{
return alert("Successfully Logged in...");
} else {
return alert('Invalid username and password');
}
}, 1000);
}
export default function reducer(state = {
isLoginSuccess: false,
isLoginPending: false,
loginError: null
}, action) {
switch (action.type) {
case SET_LOGIN_PENDING:
return Object.assign({}, state, {
isLoginPending: action.isLoginPending
});
case SET_LOGIN_SUCCESS:
return Object.assign({}, state, {
isLoginSuccess: action.isLoginSuccess
});
case SET_LOGIN_ERROR:
return Object.assign({}, state, {
loginError: action.loginError
});
default:
return state;
}
}
And I add redirecting page(userpage.js) to routes.js page
class Routes extends Component {
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={HomePage}/>
<Route path="/about" component={About}/>
<Route path="/loginform" component={LoginForm}/>
<Route path="/companies" component={Companies}/>
<Route path="/services" component={Services}/>
<Route path="/contact" component={Contact}/>
<Route path="/userpage" component={UserPage}/>
</Switch>
</Router>
</div>
);
}
}
Where does I need to add my routing code and what is needed to import?? Is there any need to install react-router? Does React-router-dom haven't any property to push??In my code where will I add this routing function??

Answer 1

import { withRouter } from 'react-router-dom'
class LoginForm extends Component {
componentWillReceiveProps(nextProps) {
if (!nextProps.isLoginPending && this.props.isLoginPending) {
if (nextProps.isLoginSuccess) {
this.props.history.push('/path-to-redirect-on-login')
} else {
console.log(this.props.loginError)
}
}
}
render() {
...
}
}
...
LoginForm = withRouter(LoginForm);
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);