react-router-dom - Difference between link and history.push?

Question

The difference between href and link I understand.

But I want to know the difference between using the link and withrouter with history.push? If I have already accessed the page does history.push retrieve the page in the cache?

Using Link:

<Link className="btn btn-primary" onClick={logout} to="/">
 Log out
</Link>

Using history:

constructor(props) {
        super(props);
        this.handleLogout = this.handleLogout.bind(this);
    };

    handleLogout(e) {
        const { history } = this.props;
        logout()
        history.push("/");

    }
<button type="button" onClick={this.handleLogout}>Log out</button>

Might be of use: https://stackoverflow.com/questions/51116747/react-router-v4-link-vs-redirect-vs-history — Colin Ricardo, Nov 18 '18 at 17:48

score 15 · Accepted Answer · answered Nov 18 '18 at 17:58

15

With the Link you can navigate to another "page" by wrapping for example a button and do the redirect when clicking. Mostly this is what you probably want to do. But in some cases you want to navigate to another "page" programatically. For example when something changes in your app that has nothing to do with clicking on a button or link.

So you can use history.push to change the url programmatically without the need to click on a button or a link. =)

answered Nov 18 '18 at 17:58

weibenfalk

794
4
9

So that's the only difference? In what context they are used? Functionality-wise they are identical? – xing Zì May 22 '21 at 15:29

react-router-dom - Difference between link and history.push?

1 Answers1