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

问题描述

我有一个正在构建的共享(React)组件库.我想包含一个 PrivateRoute 组件.但是，当我将模块库中的组件导入另一个应用程序时，出现错误:

I have a shared (React) component library that I'm building. There is a PrivateRoute component that I am wanting to include. However, when I import the component from the module library into another application, I get an error:

错误:不变式失败:您不应使用<重定向>

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

The PrivateRoute component wraps the react-router/Route component with authentication logic and redirects unauthenticated requests to login:

组件库

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) 项目中:

I then import the component into a separate (React) project:

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 组件，这将按预期工作.但是，将此组件移动到共享库会导致错误.

This will work as expected if the PrivateRoute component is defined in the create-react-app application. However, moving this component to the shared library results in the error.

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

I have tried building the library with webpack output libraryTarget set to commonjs2. But, I've also tried umd. I've also tried with Rollup. All with the same results.

webpack.config.js

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

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

My assumption is that the issue is with building the component library as the Invariant error is thrown when Redirect is unable to find the RouterContext. Although the library builds without errors, it seems that importing compiled/built code is a problem.

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

Could also be two instances of React causing an issue with the Context API. However, react-router is not using the Context API. It's using the mini-create-react-context polyfill.

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

Any thoughts or ideas on how to resolve this?

推荐答案

我终于发现了与 react-router 关系不大的问题，而与 React 关系更大的问题.我发现这个错误只会在本地开发中显示，因为 component-library 是通过 npm link 链接的.

I did finally discover the issue which had little to do with react-router and more with React. I found that this error would only show in local development because the component-library was linked via npm link.

解决方案来自这个答案:https://stackoverflow.com/a/38818358/715597

The resolution came from this answer: https://stackoverflow.com/a/38818358/715597

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

The solution in my case was to link React and React Router in the component library to the applications reference of React and 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` 重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！