title: Hide Url extensions using React-Router-Dom
body: <p>I'm using <code>react-router-dom</code> to create client-side pages within a React site.  This extension is working fine but I'm wondering if there is a way I can hide the URL extensions from appearing within the browser navigation bar.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to="/airports"&gt;Airports&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to="/cities"&gt;Cities&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to="/courses"&gt;Courses&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;Route path="/" exact component={Home}/&gt;
          {/* You don't always have to render a whole component */}
          &lt;Route path="/airports" render={() =&gt; (&lt;div&gt; This is the airport route &lt;/div&gt;)}/&gt;
          &lt;Route path="/cities" component={City}/&gt;
          &lt;Route path="/courses" component={Courses}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>So clicking on <strong>Airports</strong> will show <code>www.myurl.com/airports</code>, clicking on <strong>Cities</strong> shows <code>www.myurl.com/cities</code>.  Since these pages are created client-side and not server-side, I'd really like to hide these extensions so that whenever I click on these links, it will just show the host name of <code>www.myurl.com</code>.</p>
  
  <p>Hopefully there is an easy way of accomplishing this.  Any help is greatly appreciated!</p>