How to Access History Object Outside of a React Component

by

react-router v4 also provides a way to share history via the history package, namely createBrowserHistory() function.

The important part is to make sure that the same history object is shared across your app. To do that you can take advantage of the fact that node modules are singletons.

Create a file called history.js in your project, with the following content:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
export default history;

You can then just import it in your application via:

import history from "./history.js";

Please note that only Router accepts the history prop (BrowserRouter does not), so be sure to update your router JSX accordingly:

import { Router } from "react-router-dom";
import history from "./history.js";

// and then in your JSX:
return (
  <Router history={history}>
    {/* routes as usuall */}
  </Router>
)

A working example can be found at https://codesandbox.io/s/owQ8Wrk3

More Related Contents:

  1. How to get query parameters in react-router v4
  2. Nested Routes in React Router v4
  3. Using Jest to test a Link from react-router v4
  4. Programmatically Navigate using react-router
  5. How to push to History in React Router v4?
  6. Nested routes with react router v4 / v5
  7. React Router with optional path parameter
  8. Programmatically navigating in React-Router v4
  9. React Router v4 – How to get current route?
  10. Detect Route Change with react-router
  11. React doesn’t reload component data on route param change or query change
  12. Alternate way for optional parameters in v6
  13. Simple Conditional Routing in Reactjs
  14. Can I set a base route in react-router
  15. How do I add an active class to a Link from React Router?
  16. Forcing a React-Router to load a page, even if we’re already on that page
  17. getting 404 for links with create-react-app deployed to github pages
  18. Nested Routes not rendering with React Router v4
  19. Refresh previous screen on goBack()
  20. onEnter not called in React-Router
  21. React Router: Cannot read property ‘pathname’ of undefined
  22. Use history.push in action creator with react-router-v4?
  23. is there a way to set a default route with React-Router v6
  24. Detect change in query param react-router-dom v4.x and re-render component
  25. React Router 4 Nested Routes not rendering
  26. How to test components using new react router hooks?
  27. React router 4 does not update view on link, but does on refresh
  28. What is a state in component of React Router?
  29. isActive style in react-router v.6
  30. React Router work on reload, but not when clicking on a link

Leave a Comment