How to use history using withRouter outside component

Question

I'm quite new to react router and I'm having few difficulties. I have no problems using history inside a component. Howver, I have a function outside the said component and it can't detect history. I tried alot of things but to no avail. It gives me a history is undefined error

UserAvatar.js

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

const signOut = (history) => {

    console.log(history);
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    history.replace('/sign-in');
};


export class UserAvatar extends Component {
    render() {
        const content = (
            <div>
                <p>Content</p>
                <Button className="sign-out" onClick={() => signOut(this.props.history)}>Sign-out</Button>
            </div>
        );

export default withRouter(UserAvatar, signOut)

any ideas would be of great help Thanks!

Answer 1

You can use the history library to manually create the history outside of your component tree and give that to your Router component. This way you can import the history object wherever you need it.

Example

// history.js
import { createBrowserHistory } from 'history';

export default createBrowserHistory();

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

ReactDOM.render(
  <Router history={history}>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/user">User</Link></li>
      </ul>
      <Route exact path="/" component={HomePage} />
      <Route path="/user" component={UserAvatar} />
    </div>
  </Router>,
  document.getElementById('root')
);