1) react-router > V5 useHistory hook:
If you have React >= 16.8 and functional components you can use the useHistory hook from react-router.
import React from ‘react’;
import { useHistory } from ‘react-router-dom’;
const YourComponent = () => {
const history = useHistory();
const handleClick = () => {
history.push(“/path/to/push”);
}
return (
);
}
export default YourComponent;
2) react-router > V4 withRouter HOC:
As @ambar mentioned in the comments, React-router has changed their code base since their V4. Here are the documentations – official, withRouter
import React, { Component } from ‘react’;
import { withRouter } from “react-router-dom”;
class YourComponent extends Component {
handleClick = () => {
this.props.history.push(“path/to/push”);
}
render() {
return (
);
};
}
export default withRouter(YourComponent);
3) React-router < V4 with browserHistory
You can achieve this functionality using react-router BrowserHistory. Code below:
import React, { Component } from 'react';
import { browserHistory } from 'react-router';
export default class YourComponent extends Component {
handleClick = () => {
browserHistory.push(‘/login’);
};
render() {
return (
);
};
}
4) Redux connected-react-router
If you have connected your component with redux, and have configured connected-react-router all you have to do is
this.props.history.push(“/new/url”); ie, you don’t need withRouter HOC to inject history to the component props.
// reducers.js
import { combineReducers } from ‘redux’;
import { connectRouter } from ‘connected-react-router’;
export default (history) => combineReducers({
router: connectRouter(history),
… // rest of your reducers
});
// configureStore.js
import { createBrowserHistory } from ‘history’;
import { applyMiddleware, compose, createStore } from ‘redux’;
import { routerMiddleware } from ‘connected-react-router’;
import createRootReducer from ‘./reducers’;
…
export const history = createBrowserHistory();
export default function configureStore(preloadedState) {
const store = createStore(
createRootReducer(history), // root reducer with router state
preloadedState,
compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
// … other middlewares …
),
),
);
return store;
}
// set up other redux requirements like for eg. in index.js
import { Provider } from ‘react-redux’;
import { Route, Switch } from ‘react-router’;
import { ConnectedRouter } from ‘connected-react-router’;
import configureStore, { history } from ‘./configureStore’;
…
const store = configureStore(/* provide initial state if any */)
ReactDOM.render(
<> { /* your usual react-router v4/v5 routing */ }
document.getElementById(‘root’)
);
// YourComponent.js
import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
…
class YourComponent extends Component {
handleClick = () => {
this.props.history.push(“path/to/push”);
}
render() {
return (
);
}
};
}
export default connect(mapStateToProps = {}, mapDispatchToProps = {})(YourComponent);
For the simple answer, you can use Link component from react-router, instead of button. There is ways to change the route in JS, but seems you don’t need that here.
Click to login
To do it programmatically in 1.0.x, you do like this, inside your clickHandler function:
this.history.pushState(null, ‘login’);
Taken from upgrade doc here
You should have this.history placed on your route handler component by react-router. If it child component beneath that mentioned in routes definition, you may need pass that down further