Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 551
Hiago Bonamelli Avatar asked Nov 18 '18 17:11

Hiago Bonamelli


1 Answers

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. =)

like image 134
weibenfalk Avatar answered Oct 11 '22 12:10

weibenfalk