import browserHistory from react-router

Question

i'm trying to import browserHistory but i get error something like this.

 ./src/App.js
  Attempted import error: 'browserHistory' is not exported from 'react- 
  router'.

And My Code is:

import React, { Component } from "react";
import { browserHistory } from "react-router";

import App from "./App";
class Home extends Component {
 home = () => {
browserHistory.push("/home");
  };
    state = {};
  render() {
    return <button onClick={this.home} className="btn btn-outline-light">
            Logout
          </button>;
 }

}

Which version of React Router? In v4, individual histories were removed and replaced with routers, ie `BrowserRouter` from `"react-router-dom"` — Andrew Li, Jan 23 '19 at 12:23
This may explain everything https://github.com/ReactTraining/react-router/issues/5263 — Ionut, Jan 23 '19 at 12:24
Possible duplicate of [Where's hashHistory in React Router v4?](https://stackoverflow.com/questions/46016415/wheres-hashhistory-in-react-router-v4) — Andrew Li, Jan 23 '19 at 12:26
Possible duplicate of [React router not showing browser history](https://stackoverflow.com/questions/44063229/react-router-not-showing-browser-history) — Ionut, Jan 23 '19 at 12:28

Shevchenko Viktor · Accepted Answer · 2020-06-07T19:36:40.017

As I understand your main intention is to change browser URL in the right way, not actually importing a browserHistory

For react-router v4:

You should benefit here from HOC withRouter. Apply it in next manner, and this will pass into your component some additional props that will allow navigation over browser history

import { withRouter } from "react-router-dom";

class Home extends Component {
   home = () => { 
      // - you can now access this.props.history for navigation
      this.props.history.push("/home");
   };

   render() {
       return ( 
           <button onClick={this.home} className="btn btn-outline-light">
            Logout
          </button>;
       )
}

const HomeWitRouter = withRouter(Home);

And with react-router v5 and React Hooks this may look like:

import { useHistory } from "react-router-dom";

export const Home = () => {
  const history = useHistory();
  const goHome = () => { 
    history.push("/home");
  };

  return ( 
    <button onClick={goHome} className="btn btn-outline-light">
      Logout
    </button>;
  )
}

i am trying to redirect from one page to another and when i googlr it i found this one browserHistory — Irfan Shaikh, Jan 24 '19 at 04:03
Why you are using this HomWitRouter it gives me warning like this is defined but it's value never used. — Irfan Shaikh, Jan 24 '19 at 04:05
You need to export HomeWithRouter component and use it. Or use it in this file. — Shevchenko Viktor, Jan 24 '19 at 06:10

import browserHistory from react-router

1 Answers1