Question

我开发了一些项目中正在使用的React组件库。

其中之一是一本故事书，因此我创建了一个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/')

一切正常。如果我不添加它们，那么我将从React和从React Router Dom都收到错误消息。

Answer 1

我的库遇到同样的问题，其组件取决于react-route-dom。经过一番调查，我得出的结论是，在我的项目应用程序中，捆绑了react-router-dom的两个版本（甚至是同一版本），这创建了两个相互冲突的Context实例。

我的解决方案是将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链接

1 个答案: