react link vs a tag and arrow function

by

This may be a bit late to address your issue and you may well have figured it out. But here’s my take:

First:

What is the difference between using <Link to="/page"> and <a
href="https://stackoverflow.com/questions/43087007/page">

  • On the surface, you seem to be comparing apples and oranges here. The path in your anchor tag is a relative path while that one in the Link is absolute (rightly so, I don’t think react-router supports relative paths yet). The problem this creates is say you are on /blah, while clicking on your Link will go to /page, clicking on the <a href="https://stackoverflow.com/questions/43087007/page" /> will take you to /blah/page. This may not be an issue though since you confirmed the correctness of the url, but thought to note.
  • A bit deeper difference, which is just an addon to @Dennis answer (and the docs he pointed to), is when you are already in a route that matches what the Link points to. Say we are currently on /page and the Link points to /page or even /page/:id, this won’t trigger a full page refresh while an <a /> tag naturally will. See issue on Github.

A fix I used to solve my little need around this was to pass in a state property into link like so <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>. Then I can check for this in the target component’s (say <Page />) componentWillReceiveProps like so:

componentWillReceiveProps(nextProps){
  if (nextProps.location.state === 'desiredState') {
    // do stuffs
  }
}

Second question:

the weird arrow function in react router v4 documentation… I cannot find anything on normal brackets instead of parentheses. What are they?

Arrow functions; again @Dennis and @Jaromanda X have kind of addressed it. However, I’ve got three bits to add:

  • When you have () => blah without the curly braces {}, you are implicitly returning whatever follows the => in this case blah. But when you have curly braces immediately after the arrow, then it’s now your responsibility to return something if you so desire. So () => blah (which by the way is synonymous to () => (blah)) will be more similar to () => { return blah } and not () => { blah }.
  • So what happens if you want to return an object: { blah: blah }; this is what @Jaromanda X was pointing at. You will then need to do () => ({ blah: blah }) or simply () => ({ blah }) for implicit return or you could return explicitly like so () => { return { blah: blah } }.
  • My third bit is to point you to MDN

Hope it helps.

Leave a Comment