react link vs a tag and arrow function

Question

Hi guys I\'m a beginner programmer just started on react router.

I have two questions. What is the difference between using an

Answer 1

There is no better then looking at the code source.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

You can see that Link is a component, that internally use history. Which is the module||library behind the history and navigation for react-router. And come with different modes (in memory history, browserHistory, hashHistory. And even custom).

Yea as a similarity it render an anchor tag but the default behavior is overridden (preventDefault()). They could have used just a div. But not completely right. As for the reason bellow.

So basically it work like that:

Observe the condition bellow

  if (
          !event.defaultPrevented && // onClick prevented default
          event.button === 0 && // ignore everything but left clicks
          (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
          !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {

}

if the condition above is met. It will use history (push or replace). Otherwise it will leave the browser normal behavior. And so in that case it will be just a normal anchor tag . Example letting the browser handle target='blank'. The condition are well explained. Then depending on the type of history object. The behavior change. Not the behavior of ` itself. But just the result of the history object type.

In resume:

is a component, that render a anchor tag. However in the main conditions the default behavior is prevented (preventDefault()). That allow it to apply the change to the history object (onClick event). Which react-router navigation is based on. And on the some conditions as mentioned above. It just fall back to the browser behavior. And just be exactly a  anchor tag (no preventDefault()).

For the use. If you are using React-router. Then you just need to use Link.