How to get history on React Router v4?

Below are the list of steps to get history object on React Router v4,

  1. Create a module that exports a history object and import this module across the project.

    For example, create history.js file:

    import { createBrowserHistory } from 'history';
    export default createBrowserHistory({
    /* pass a configuration object here if needed */
    });
  2. You should use the <Router> component instead of built-in routers. Imported the above history.js inside index.js file:

    import { Router } from 'react-router-dom';
    import history from './history';
    import App from './App';
    ReactDOM.render(
    <Router history={history}>
    <App />
    </Router>,
    holder,
    );
  3. You can also use push method of history object similar to built-in history object:

    // some-other-file.js
    import history from './history';
    history.push('/go-here');

September 25, 2022
2804