Question

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

错误：不变式失败：您不应在
外使用

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,
            }}
          />
        )}
      />
    );
  }
}

然后我将组件导入到一个单独的（反应）项目中：

create-react-app

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>
    );
  }
}

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

我尝试使用将webpack输出libraryTarget设置为 commonjs2 来构建库。但是，我也尝试过 umd 。我也尝试过汇总。所有结果都相同。

webpack.config.js

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

我的假设是问题在于构建组件库，因为当Redirect无法找到RouterContext时会抛出Invariant错误。尽管该库的构建没有错误，但是导入已编译/构建的代码似乎是一个问题。

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

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

Answer 1

您必须从react-router-dom导入路由器（假设您使用的是V4），例如：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

在v4中，react-router导出核心组件和功能。   react-router-dom导出DOM感知组件，例如（其中   呈现）和（与   浏览器的window.history）。

react-router-dom重新导出react-router的所有导出，因此仅   需要从项目中的react-router-dom导入。

参考：https://github.com/ReactTraining/react-router/issues/4648#issuecomment-284479720

Answer 2

您只需要从package.json中删除依赖项“ react-router-dom”：“ 5.0.0”即可解决该错误。

Answer 3

您不能使用功能

if(authState === SIGNED_IN){
   return <Route
        {...rest}
        render={<Comp {...props} />
        />
}else{
   // here you can use window.location 
   // or 
   // render a different component (which shows unauthorized or something you want)
}

Answer 4

我终于发现了与react-router无关的问题，而与React无关的问题。我发现此错误仅会在本地开发中显示，因为component-library是通过npm link链接的。

分辨率来自以下答案：https://stackoverflow.com/a/38818358/715597

在我的案例中，解决方案是将组件库中的React和React Router链接到React和React Router的应用程序引用：

# link the component library
cd my-app
npm link ../component-library

# link its copy of React back to the app's React
cd ../component-library
npm link ../my-app/node_modules/react
npm link ../my-app/node_modules/react-router

从共享组件库中导出`react-router`重定向

4 个答案: