title: Export `react-router` Redirect from shared component library
body: <p>
  I have a shared (React) component library that I'm building. There is a <code>PrivateRoute</code> component that I am wanting to include. However, when I import the component from the module library into another application, I get an error:</p>
  
  <blockquote>
    <p>Error: Invariant failed: You should not use &lt;Redirect&gt; outside a &lt;Router&gt;</p>
  </blockquote>
  
  <p>The <code>PrivateRoute</code> component wraps the <code>react-router/Route</code> component with authentication logic and redirects unauthenticated requests to login:</p>
  
  <p><strong>component-library</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Route, Redirect } from 'react-router';
  /* ... */
  
  class PrivateRoute extends Component {
    /* ... */
    render() {
      const {
        component: Comp, authState, loginPath, ...rest
      } = this.props;
  
      return (
        &lt;Route
          {...rest}
          render={props =&gt; authState === SIGNED_IN ? (
            &lt;Comp {...props} /&gt;
          ) : (
            &lt;Redirect
              to={{
                pathname: loginPath,
              }}
            /&gt;
          )}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>I then import the component into a separate (React) project:</p>
  
  <p><strong>create-react-app</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Router } from 'react-router';
  import { PrivateRoute } from 'component-library';
  /* ... */
  
  class App extends Component {
    // "history" is passed in via props from the micro frontend controller.
    /* ... */
  
    render() {
      return (
        &lt;Router history={this.props.history}&gt;
          {/* ... */}
          &lt;PrivateRoute path="/protected" component={ProtectedView} /&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>This will work as expected if the <code>PrivateRoute</code> component is defined in the <em>create-react-app</em> application. However, moving this component to the shared library results in the error.</p>
  
  <p>I have tried building the library with webpack output <code>libraryTarget</code> set to <em>commonjs2</em>. But, I've also tried <em>umd</em>. I've also tried with Rollup. All with the same results.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    //...
    output: {
      path: path.resolve(__dirname, 'dist/'),
      publicPath: '',
      filename: '[name].js',
      libraryTarget: 'commonjs2',
    },
    //...
  };
  </code></pre>
  
  <p>My assumption is that the issue is with building the component library as the Invariant error is thrown when <code>Redirect</code> is unable to find the <code>RouterContext</code>. Although the library builds without errors, it seems that importing compiled/built code is a problem.</p>
  
  <p>Could also be two instances of React causing an issue with the Context API. However, <code>react-router</code> is not using the Context API. It's using the <code>mini-create-react-context</code> polyfill. </p>
  
  <p>Any thoughts or ideas on how to resolve this?</p>