Navigating by dispatching actions

The connected-react-router library provides actions that you can dispatch from your components to navigate to the routes defined in the application. These include push, replace, go, goBack, and goForward. These methods call the corresponding methods on the history object to navigate to the specified path.

The DashboardComponent in the previous example can now be updated to use mapDispatchToProps:

import {push, replace} from 'connected-react-router';

const Dashboard = ({ pathname, search, hash, state, count, push, replace }) => {    
    return (
        ...
<button onClick={() => {push('/')}}>HOME</button>
        <button onClick={() => {replace('/counter')}}>COUNTER</button>
        ...
    )
}

const mapStateToProps = state => ({
...
});

const mapDispatchToProps = dispatch => ({
    push...