title: React Router Doesn't Work on Safari and Firefox but Works on Chrome
body: <p>I am using React Router on my website to link to other pages. On Google Chrome, when I click on a link to another page within the website (through React Router), it works just fine. However, on Firefox, I have to click twice (after my first click, the current page refreshes, but after the second click, the new page loads). On Safari, it just keeps refreshing the current page. </p>
  
  <p>How do I get React Router to work on the first click on Firefox and Safari?</p>
  
  <p>You can try it out yourself on Safari link <a href="http://riceappsv2.surge.sh/" rel="nofollow noreferrer">http://riceappsv2.surge.sh/</a>. Scroll halfway down to where you see 5 circles with AirBNB logos, and try clicking on the link that says "BeakSpeak". It should link to this page <a href="http://riceappsv2.surge.sh/beakspeak" rel="nofollow noreferrer">http://riceappsv2.surge.sh/beakspeak</a>.</p>
  
  <p>Here is our App.JS. The 5 AirBNB logos are in the page called Projects. (The import statements are just for the pages that I load.)</p>
  
  <pre><code>import React, { Component } from 'react';
  import { ParallaxProvider } from 'react-scroll-parallax';
  import LandingPage from './Pages/LandingPage.js';
  import Testimonials from './Pages/Testimonials.js'
  import WorkForUs from './Pages/WorkForUs.js';
  import JoinUs from './Pages/JoinUs.js';
  import Projects from './Pages/Projects.js';
  import AboutUs from './Pages/AboutUs.js';
  import WhatWeDo from './Pages/WhatWeDo.js';
  import Partners from './Pages/Partners.js';
  import './App.css';
  import './hamburgers.css';
  import './styles.css'
  import ScrollIntoView from 'react-scroll-into-view';
  
  class App extends Component {
      constructor(props) {
      super(props);
      this.state = {
        clicked: false,
      };
    }
  
    render() {
      return (
        &lt;ParallaxProvider&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;div id="home"&gt;&lt;LandingPage /&gt;&lt;/div&gt;
            &lt;div id="whatWeDo"&gt;&lt;WhatWeDo /&gt;&lt;/div&gt;
            &lt;div id="aboutUs"&gt;&lt;AboutUs /&gt;&lt;/div&gt;
            &lt;div id="projects"&gt;&lt;Projects /&gt;&lt;/div&gt;
            &lt;div id="partners"&gt;&lt;Partners /&gt;&lt;/div&gt;
            &lt;div id="testimonials"&gt;&lt;Testimonials /&gt;&lt;/div&gt;
            &lt;div id="contactUs"&gt;&lt;JoinUs /&gt;&lt;/div&gt;
            &lt;div id="joinUs"&gt;&lt;WorkForUs /&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/ParallaxProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Here is the Projects page in which I use React Router to link to the page BeakSpeak. </p>
  
  <pre><code>import React, { Component } from 'react';
  import Fade from 'react-reveal/Fade';
  import './Projects.css';
  import {BrowserRouter as Router, Link} from "react-router-dom";
  
  export default class LandingPage extends Component {
    render() {
      return(
      &lt;div className = "projectsPageWrapper"&gt;
       &lt;Fade left duration = {1500}&gt;
          &lt;div id = "beakspeak"&gt;
            &lt;div id = "BsTitle"&gt;
            &lt;Router&gt;
              &lt;div&gt;
                &lt;Link to = "/beakspeak" onClick = {() =&gt; window.location.reload()} class = "link"&gt;
                  &lt;h1&gt;Beakspeak&lt;/h1&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
            &lt;/Router&gt;
            &lt;/div&gt;
            &lt;div className = "circle"&gt;
              &lt;img className = "airbnb" src = "http://logok.org/wp-content/uploads/2014/07/airbnb-logo-belo-880x628.png" alt=""&gt;&lt;/img&gt;
              &lt;div className = "projectText"&gt;
              Anonymous social media platform exclusively for the Rice community&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Fade&gt;
      &lt;/div&gt;
    )
    }
  }
  </code></pre>