title: I keep getting a blank screen in React.JS
body: <p>I was following a tutorial and my localhost is completely blank after importing {Link} from react-router-dom. Followed word for word but my local host is blank as soon as I added link in navbar.js.</p>
  <pre><code>import React from 'react';
  import {Link} from 'react-router-dom';
  
  function Navbar() {
      return(
          &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
                  &lt;div class=&quot;container-fluid&quot;&gt;
              
                  &lt;Link to=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;SkyCloud&lt;/Link&gt;
  
                  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                      &lt;span class=&quot;navbar-togglser-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                      &lt;ul class=&quot;navbar-nav ms-auto mb-2 mb-lg-0&quot;&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;Link to=&quot;/&quot; class=&quot;nav-link active&quot;&gt;Home&lt;/Link&gt;
                      &lt;/li&gt;
  
                      &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;Link to=&quot;/about&quot; class=&quot;nav-link active&quot;&gt;About&lt;/Link&gt;
                      &lt;/li&gt;
  
                      &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;Link to=&quot;/contact&quot; class=&quot;nav-link active&quot;&gt;Contact&lt;/Link&gt;
                      &lt;/li&gt;
  
                      &lt;/ul&gt;
                      
                  &lt;/div&gt;
                  &lt;/div&gt;
        &lt;/nav&gt;  
  
      );
  
  
  
  
  }
  
  export default Navbar;
  </code></pre>
  <p>And this is my App.js file...</p>
  <pre><code>import React from 'react';
  import Navbar from './components/inc/Navbar';
  import Home from './components/pages/Home';
  import About from './components/pages/About';
  import Contact from './components/pages/Contact';
  import {BrowserRouter as Router} from 'react-router-dom'; 
  
  function App() {
    return (
      
      &lt;Router&gt;
      &lt;div&gt;
       &lt;Navbar/&gt;
      &lt;Home/&gt;
     &lt;About/&gt;
     &lt;Contact/&gt;
  
    
      &lt;/div&gt;
      &lt;/Router&gt;
      
     
    );
  }
  
  export default App;
  </code></pre>