How to push to History in React Router v4?

by

You can use the history methods outside of your components. Try by the following way.

First, create a history object used the history package:

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Then wrap it in <Router> (please note, you should use import { Router } instead of import { BrowserRouter as Router }):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="https://stackoverflow.com/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="https://stackoverflow.com/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Change your current location from any place, for example:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push("https://stackoverflow.com/");
      });
  };
}

UPD: You can also see a slightly different example in React Router FAQ.

More Related Contents:

  1. Programmatically navigating in React-Router v4
  2. Nesting Routes in react-router v4
  3. React Router v4 – How to get current route?
  4. Detect Route Change with react-router
  5. Simple Conditional Routing in Reactjs
  6. Nested Routes not rendering with React Router v4
  7. Use history.push in action creator with react-router-v4?
  8. React Router 4 Nested Routes not rendering
  9. React router 4 does not update view on link, but does on refresh
  10. How to nest routes in React Router v4?
  11. React Router work on reload, but not when clicking on a link
  12. Programmatically Navigate using react-router
  13. Programmatically navigate using react router V4
  14. React-router-v6 access a url parameter
  15. Component does not remount when route parameters change
  16. react-router-dom v6 useNavigate passing value to another component
  17. React doesn’t reload component data on route param change or query change
  18. What is withRouter for in react-router-dom?
  19. How do you programmatically update query params in react-router?
  20. Using React-Router with a layout page or multiple components per page
  21. Target Active Link when the route is active in Next.js
  22. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  23. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  24. React App goes blank after importing React-Router-Dom
  25. Pass object through Link in react router
  26. Automatic redirect after login with react-router
  27. React router and this.props.children – how to pass state to this.props.children
  28. using NavLink with external URL
  29. Children won’t render when using a layout in ReactJS
  30. React Router Navigate pathing

Leave a Comment