REACT组件库呈现REACT链接 [英] React components library rendering React Links

问题描述

我开发了一个Reaction组件库，我正在从我的一些项目中使用它。

其中一个是故事书，所以我创建了一个BrowserRouter装饰器来添加到我的故事中，组件完美地呈现出来，只是为了展示和发挥作用。

但是，当使用来自另一个项目的一些组件时，该项目在我的应用程序组件树的顶层具有BrowserRouter，我收到以下错误：

Error: Invariant failed: You should not use <Link> outside a <Router>

在这里，您可以看到我尝试从ConsumerProject呈现的内容的简短片段：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { LibraryComponent } from 'my-library';

const element = (
      <HotEnabler>
        <BrowserRouter>
          <RouterTrigger trigger={pathname => triggerHooks(_routes, pathname)}>
            <ApolloProvider client={client}>
              <ApolloProviderHooks client={client}>
                <LibraryComponent />
              </ApolloProviderHooks>
            </ApolloProvider>
          </RouterTrigger>
        </BrowserRouter>
      </HotEnabler>
);

ReactDOM.render(element, destinationDomElement);

在这里，您可以看到MyLibrary最重要的部分：

Package.json：

...
"peerDependencies": {
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6",
    "react-router": ">=5.0.0",
    "react-router-dom": ">=5.0.0",
    "styled-components": ">=4.1.0"
}

LibraryComponent.js：

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import { SCLink } from './styles';

const LibraryComponent = props => {
  return (
      <Link
        to={'/any-route/'}
      >
        Testing Links
      </Link>
    );
  }
};

export default LibraryComponent;

我想添加一些重要的内容：

如果我将此别名添加到ConsumerProject的webpack配置：

react: path.join(constants.ROOT_DIR, '../my-library/node_modules/react/'),
'react-dom': path.join(constants.ROOT_DIR, '../my-library/node_modules/react-dom/'),
'react-router-dom': path.join(constants.ROOT_DIR, 'node_modules/react-router-dom/')

一切运行正常。如果我不添加它们，我会同时从Reaction和Reaction路由器DOM中收到错误。

推荐答案

我的库遇到了相同的问题，其组件依赖于react-route-dom。经过调查，我发现在我的项目APP中，有两个版本的react-router-dom捆绑在一起(甚至是同一个版本)，这会创建两个相互冲突的上下文实例。

我案例中解决方案是将react-router-dom移到peerDependencies，并将其从使用webpack配置的库构建中排除：

externals: {
  'react-router-dom': {
    root: 'ReactRouterDom',
    commonjs2: 'react-router-dom',
    commonjs: 'react-router-dom',
    amd: 'react-router-dom',
  },
},

找到更深入的信息here。

这篇关于REACT组件库呈现REACT链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！