title: Error Invariant failed: You should not use <Link> outside a <Router>
body: <p>I have the above error, I couldn't figure out what problem is, I am using <code>react-router-dom</code> with <code>typescript</code>:</p>
  <pre><code>import React from &quot;react&quot;;
  import Nav from &quot;./components/Nav&quot;;
  import Main from &quot;./components/Main&quot;;
  import About from &quot;./components/About&quot;;
  import { BrowserRouter , Route, Switch, Link } from &quot;react-router-dom&quot;;
  const App: React.FC = (props) =&gt; {
      return (
          &lt;BrowserRouter&gt;
              {/* &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt; */}
              &lt;Nav pages={[{ name: &quot;main&quot;, path: &quot;/&quot; }]} /&gt;
              &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot; exact&gt;
                      &lt;Main&gt;
                          &lt;h1&gt;Test&lt;/h1&gt;
                      &lt;/Main&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/about&quot;&gt;
                      &lt;About&gt;
                          &lt;h1&gt;About page&lt;/h1&gt;
                      &lt;/About&gt;
                  &lt;/Route&gt;
              &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
      );
  };
  
  export default App;
  </code></pre>
  <p>and the <code>Nav</code> component:</p>
  <pre><code>import React from &quot;react&quot;;
  import {Link} from 'react-router-dom'
  type NavProps = {
      pages: NavItem[];
  };
  type NavItem = {
      path: string;
      name: string;
  };
  const Nav: React.FC&lt;NavProps&gt; = (props: NavProps) =&gt; {
      return (
          &lt;nav&gt;
              &lt;ul&gt;
                  {props.pages.map((page) =&gt; (
                      &lt;li key={page.name}&gt;
                          &lt;Link to={page.path}&gt;{page.name}&lt;/Link&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          &lt;/nav&gt;
      );
  };
  export default Nav;
  </code></pre>
  <p>It just doesn't make any sense clearly the <code>Link</code> is rendered inside <code>Nav</code> which in turn rendered inside <code>BrowserRouter</code>, am I missing something here?</p>
  <p>If I replaced the <code>Nav</code> component, with:</p>
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>...this hardcoded snippet the error goes away.</p>
  <p>and this is the app entry <code>index.tsx</code>:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./app&quot;;
  
  ReactDOM.render(
      &lt;React.StrictMode&gt;
          &lt;App /&gt;
      &lt;/React.StrictMode&gt;,
      document.getElementById(&quot;app&quot;)
  );
  </code></pre>