title: react link vs a tag and arrow function
body: <p>I just started on react router.</p>
  <p>I have two questions. What is the difference between using <code>&lt;Link to=&quot;/page&quot;&gt;</code> and <code>&lt;a href=&quot;page&quot;&gt;</code>? Both make the exact same get request to <code>/page</code> but I get an error when I use <code>&lt;a href=&quot;page&quot;&gt;</code> but it works when I use <code>&lt;Link to=&quot;/page&quot;&gt;</code> when I am nesting routes. I don't understand, how there could be any difference, when I know for fact that both render to exact same url?</p>
  <p>Second is the weird arrow function in react router v4 documentation</p>
  <pre><code>const About = () =&gt; (
    &lt;div&gt;
      &lt;h2&gt;About&lt;/h2&gt;
    &lt;/div&gt;
  )
  </code></pre>
  <p>I know <code>() =&gt; {}</code> these are new in ES6 but I cannot find anything on normal brackets instead of parentheses. What are they?</p>
  <p>Edit</p>
  <p>My index.js class (I have all the imports)</p>
  <pre><code>render((
      &lt;Router&gt;
          &lt;div&gt;
              &lt;Route component={App}/&gt;
          &lt;/div&gt;
      &lt;/Router&gt;
  ), document.getElementById('root')
  );
  </code></pre>
  <p>My App.js class</p>
  <pre><code>class App extends Component {
  render() {
      return (
          &lt;div className=&quot;container&quot;&gt;
              &lt;header&gt;
                  &lt;span className=&quot;icn-logo&quot;&gt;&lt;i className=&quot;material-icons&quot;&gt;code&lt;/i&gt;&lt;/span&gt;
                  &lt;ul className=&quot;main-nav&quot;&gt;
                      &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to=&quot;/teachers&quot;&gt;Teachers&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to=&quot;/courses&quot;&gt;Courses&lt;/Link&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/header&gt;
              &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
              &lt;Route path=&quot;/about&quot; component={About}/&gt;
              &lt;Route path=&quot;/teachers&quot; component={Teachers}/&gt;
              &lt;Route path=&quot;/courses&quot; component={Course}/&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default App;
  </code></pre>
  <p>The error I'm getting.
  <code>Cannot GET /about</code> on the browser when I try to move to <code>localhost:8080/about</code>. However, when I click the <code>about</code> button, it goes to exactly the same url <code>/about</code> and renders perfectly</p>