title: What is the correct way to correctly visualize a component React in top of another?
body: <p>I'm trying to properly render my different components with the HTML/CSS sidebar with React Routes and Apollo.</p>
  
  <p>I have a sidebar that correctly renders to the left of the screen and a little navbar on top of it, the space for the component is not being blocked by any css property. </p>
  
  <p>The expected output is:</p>
  
  <p><img src="https://i.stack.imgur.com/5pQpU.png" alt="Expected Output"></p>
  
  <p>The actual output:</p>
  
  <p><img src="https://i.stack.imgur.com/bAYHi.png" alt="Actual Output"></p>
  
  <p>I've tried to place all the Routes inside the sidebar but every time I click on them, they don't load at all, the URL changes but the content doesn't and I need to reload the webpage for it take some effect. The help would be very much appreciated.</p>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import ApolloClient from 'apollo-boost';
  import {ApolloProvider} from '@apollo/react-hooks';
  import { render } from 'react-dom';
  import {BrowserRouter as Router, Route, Link,Switch} from 'react-router-dom'; 
  import 'bootswatch/dist/flatly/bootstrap.min.css';
  
  import Nav from './components/Nav'
  import Home from './components/pages/Home'
  import About from './components/pages/About'
  import Articles from './components/article/Articles'
  import Article from './components/article/Article'
  
  const client = new ApolloClient({
    uri: 'url in here'
  });
  
  
  const App = () =&gt; {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;Router&gt;
        &lt;div className="App"&gt;
          &lt;Nav/&gt;
          &lt;Route exact path='/' component={Home} /&gt;
          &lt;Route exact path='/Articles' component={Articles} /&gt;
          &lt;Route exact path='/Articles/:id' component={Article} /&gt;
          &lt;Route exact path='/About' component={About} /&gt;
  
  
        &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/ApolloProvider&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  export default App;
  
  </code></pre>
  
  <p>Nav.js component</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as  Link} from 'react-router-dom'; 
  
  export default function Nav() {
      return (
          &lt;div className="wrapper"&gt;
              &lt;nav id="sidebar"&gt;
                  &lt;Link className="nav-link" to="/"&gt;
                      &lt;h3&gt;Home&lt;/h3&gt;
                  &lt;/Link&gt;
                  .
                  .
                  .
              &lt;/nav&gt;
  
              &lt;div id="content"&gt;
                  &lt;nav className="navBar" &gt; 
  
                  &lt;/nav&gt;
  
                  &lt;div className ="ComponentRender"&gt;
                      Here's where the component should be rendered
                  &lt;/div&gt;
  
              &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  
  
  
  </code></pre>