title: React: Using NavLink in a shared component library imported as a node_module
body: <p>I have a working shared component library that I import into my front end app as a node_module using <code>package.json</code>.</p>
  <p>I have built a <code>PaginationLinks</code> component that uses <code>NavLink</code>:</p>
  <p>PaginationLinks.js (in shared component library)</p>
  <pre><code>import { NavLink } from 'react-router-dom';
  
  const PaginationLinks = {
    return (
      &lt;Container&gt;
        ...
        &lt;NavLink to={&quot;/&quot;}&gt;Home&lt;/NavLink&gt;
      &lt;/Container&gt;
    );
  };
  
  export default PaginationLinks;
  </code></pre>
  <p>In my front end app, I have react-router and all of that set up already in my working app:</p>
  <p>routes.js</p>
  <pre><code>import { Route, Switch, Redirect } from 'react-router';
  import React from 'react';
  import { history } from './redux/store';
  import { ConnectedRouter } from 'connected-react-router';
  ...
  
  function App() {
    return (
      &lt;ConnectedRouter history={history}&gt;
        &lt;Switch&gt;
          &lt;BasePage&gt;
            &lt;Switch&gt;
              &lt;Route
                exact
                path=&quot;/&quot;
                component={HomePage}
              /&gt;
              ...
            &lt;/Switch&gt;
          &lt;/BasePage&gt;
        &lt;/Switch&gt;
      &lt;/ConnectedRouter&gt;
    );
  }
  </code></pre>
  <p>FYI this is already an app where I have existing routes and import NavLink with no problem.</p>
  <p>However, when I try to import my component into my app, it is complaining that my NavLink is not inside a router:</p>
  <p><code>Error: Invariant failed: You should not use &lt;NavLink&gt; outside a &lt;Router&gt;</code></p>
  <pre><code>import React from 'react';
  import { NavLink } from 'react-router-dom';
  import PaginationLinks from '@my-lib/ui/components/PaginationLinks';
  import H1 from '@my-lib/ui/components/H1';
  
  const HomePage = () =&gt; (
    &lt;div&gt;
      &lt;H1&gt;hello&lt;/H1&gt; // this works
      &lt;NavLink to=&quot;/somewhere&quot;&gt;somewhere&lt;/NavLink&gt; // this works
      &lt;PaginationLinks /&gt; // this breaks the app
    &lt;/div&gt;;
  </code></pre>
  <p>)</p>
  <pre><code>export default HomePage;
  </code></pre>
  <p>How would I use NavLink inside a shared component library? It doesn't make sense to wrap PaginationLinks inside of a Router in my shared component library.</p>