我有一个正在构建的共享（React）组件库。PrivateRoute我想包含一个组件。但是，当我将module库中的组件导入另一个应用程序时，出现错误：

错误：不变失败：您不应在 <Router> 之外使用 <Redirect>

该PrivateRoute组件react-router/Route使用身份验证逻辑包装组件并将未经身份验证的请求重定向到登录：

组件库

import { Route, Redirect } from 'react-router';
/* ... */

class PrivateRoute extends Component {
  /* ... */
  render() {
    const {
      component: Comp, authState, loginPath, ...rest
    } = this.props;

    return (
      <Route
        {...rest}
        render={props => authState === SIGNED_IN ? (
          <Comp {...props} />
        ) : (
          <Redirect
            to={{
              pathname: loginPath,
            }}
          />
        )}
      />
    );
  }
}

然后我将组件导入到一个单独的 (React) 项目中：

创建react应用程序

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 (
      <Router history={this.props.history}>
        {/* ... */}
        <PrivateRoute path="/protected" component={ProtectedView} />
      </Router>
    );
  }
}

如果PrivateRoute组件是在create-react-app应用程序中定义的，这将按预期工作。但是，将此组件移动到共享库会导致错误。

我尝试使用 webpack 输出libraryTarget设置为commonjs2来构建库。但是，我也试过umd。我也尝试过使用 Rollup。所有的结果都是一样的。

webpack.config.js

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '',
    filename: '[name].js',
    libraryTarget: 'commonjs2',
  },
  //...
};

我的假设是问题在于构建组件库，因为当Redirect无法找到RouterContext. 虽然库构建没有错误，但导入编译/构建的代码似乎是一个问题。

也可能是 React 的两个实例导致 Context API 出现问题。但是，react-router没有使用 Context API。它正在使用mini-create-react-contextpolyfill。

关于如何解决这个问题的任何想法或想法？