reactjs - React 组件库渲染 React Links

Question

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

其中一个是 Storybook，所以我创建了一个 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。经过一番调查，我得出的结论是，在我的项目应用程序中，捆绑了 2 个版本的 react-router-dom(即使是同一版本)，这会创建 2 个相互冲突的 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 .