title: ReactJS Header Layout , You should not use <Link> outside a <Router>
body: <p>I'm trying to create a Layout component which would render the Header and Footer. I want to create menu list at Header but I got this error from Header.jsx.</p>
  
  <pre><code>Error: You should not use &lt;Link&gt; outside a &lt;Router&gt;
  </code></pre>
  
  <p>I want to know the solution how to use &lt; Link > at Header.jsx</p>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as Router,Route,Link,Switch,Redirect,browserHistory} from 'react-router-dom';
      class App extends React.Component {
  
        render() {
              return (
                  &lt;Layout&gt;
                      &lt;Router history={browserHistory}&gt;
                          &lt;div&gt;
                              &lt;Route path="/" component={home}/&gt;
                              &lt;Route path="/docs" component={docs}/&gt;
                          &lt;/div&gt;
                      &lt;/Router&gt;
                  &lt;/Layout&gt;
              );
          }
  
  
      }
  
  export default App;
  </code></pre>
  
  <p><strong>Layout.jsx</strong></p>
  
  <pre><code>class Layout extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Header /&gt;
                  {this.props.children}
                  &lt;Footer /&gt;
              &lt;/div&gt;
          )
      }
  }
  export default Layout;
  </code></pre>
  
  <p><strong>Header.jsx</strong></p>
  
  <pre><code>class Header extends React.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="/docs"&gt;DOCS&lt;/Link&gt;&lt;/li&gt;
                &lt;/ul&gt;     
              &lt;/div&gt;
              );          
        }
   }
  
  export default Header;
  </code></pre>