title: React Router Issue: React render two components in the same page
body: <p>I'm having issues with my project, actually i'm trying to handle a 404 page when the user enters different url outside of the Routes in my App, but using my knowledge of React and react-router only needs to put the last route has no path and <strong>exact path</strong> wrapped by a <strong>Switch</strong> from react-router but not work well, the home page is rendering the <strong>Home</strong> and the <strong>NotFound</strong> components at same time.</p>
  
  <p>I've tried to remove Container component inside the Router but that makes that all of the components after MenuBar disappears.</p>
  
  <p>I've tried to put path='*' in the last Route having 2 components rendered in the same page.</p>
  
  <p>A picture of what i'm talking about:
  <a href="https://i.stack.imgur.com/skgdj.jpg" rel="nofollow noreferrer">2 components at same time</a></p>
  
  <p>My project have 3 principal files:</p>
  
  <p>1.- Index.js :</p>
  
  <pre><code>import ReactDOM from 'react-dom';
  import * as serviceWorker from './serviceWorker';
  import ApolloProvider from './ApolloProvider';
  
  import 'semantic-ui-css/semantic.min.css';
  import 'animate.css/animate.min.css';
  import './App.css';
  
  ReactDOM.render(ApolloProvider, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>2.- ApolloProvider.js (using Apollo with GraphQL) :</p>
  
  <pre><code>import React from 'react';
  import App from './App';
  import ApolloClient from 'apollo-client';
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import { createHttpLink } from 'apollo-link-http';
  import { ApolloProvider } from '@apollo/react-hooks';
  
  const httpLink = createHttpLink({
      uri: 'http://localhost:5000/graphql'
  });
  
  const client = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache()
  });
  
  export default (
      &lt;ApolloProvider client={client}&gt;
          &lt;App /&gt;
      &lt;/ApolloProvider&gt;
  );
  
  </code></pre>
  
  <p>3.- And finally App.js :</p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import { Container } from 'semantic-ui-react';
  
  import MenuBar from './Components/MenuBar';
  import Home from './Pages/Home';
  import Login from './Pages/Login';
  import Register from './Pages/Register';
  import NotFound from './Pages/404';
  
  const App = props =&gt; (
      &lt;Router&gt;
          &lt;Switch&gt;
              &lt;Container&gt;
                  &lt;MenuBar /&gt;
                  &lt;Route exact path='/' component={Home} /&gt;
                  &lt;Route exact path='/login' component={Login} /&gt;
                  &lt;Route exact path='/register' component={Register} /&gt;
                  &lt;Route path='*' component={NotFound} /&gt;
              &lt;/Container&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
  );
  
  export default App;
  
  </code></pre>
  
  <p>I only need to render Home component when the user visits '/' but it's weird how react-router is rendering two components at same time, please le me know if you find where i'm wrong or a solution for that, i'll being posting updates if i find a solution or whatever.</p>
  
  <p>Thanks in advance mates!.</p>