A VS A:Link, What Is the Difference

a vs a:link, What is the difference?

According to W3C a:link is for not visited, a:visited is for visited, and just a applies to both.

difference between a and a: link and others

6.6.1.1. The link pseudo-classes: :link and :visited

User agents commonly display unvisited links differently from
previously visited ones. Selectors provides the pseudo-classes :link
and :visited to distinguish them:

The :link pseudo-class applies to links that have not yet been visited.

The :visited pseudo-class applies once the link has been visited by the user.

After some amount of time, user agents may choose to return a visited
link to the (unvisited) ‘:link’ state.

The two states are mutually exclusive.

Moreover, adding the :link pseudo-class increases the specificity:

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (=a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (=b)

count the number of type selectors and pseudo-elements in the selector (=c)

ignore the universal selector

Difference between a and a:link

a:link is specifically for links that have not been visited. a applies to all <a> elements.

link vs a: when to use one over the other?

Attributes are not the same as the tag they are in.

<link /> is an empty element, i.e. it can not have anything inside of it. All it does is specify a relationship with another document. Additionally, the <link> tag is only used in the <head> section.

<a></a> on the other hand, is not an empty element and specifies an object to be created on the page - like a clickable link or image - which takes the user to some other location. This tag is only used in the <body> section.

So, even though the tags can have the same attributes, that does not mean they do the same thing.

react link vs a tag and arrow function

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="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='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.

CSS styling links: why a:link, a:visited vs just a

If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.

a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other elements as well.

Difference between a and a:link

a:link is specifically for links that have not been visited. a applies to all <a> elements.

What is the difference between a URL and a LINK?

URL is an acronym for "Uniform Resource Locator", and it is the
address that specifies the location of a resource on the Internet. A
typical URL must specify the protocol used to access the resource, the
name of the host computer on which it is located, and the path of the
resource:

http://www.server.com/main/folder/resource.html

The above URL indicates that the document resource.html is located at
the web server www.server.com where it can be found in the path
/main/folder.

An Hyperlink, or simply a Link, is:

"An element in an electronic
document that links to another place in the same document or to an
entirely different document. Typically, you click on the hyperlink to
follow the link."

Source

A VS A:Link, What Is the Difference