时间戳

首页 > 解决方案 > React 组件库渲染 React Links

reactjs - React 组件库渲染 React Links

问题描述

我开发了一个 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：

包.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"
}

库组件.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;

我想添加一些重要的东西：

如果我将此别名添加到 Webpack 配置中ConsumerProject：

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 收到错误。

标签： reactjsreact-routerreact-router-domstyled-componentsstorybook

解决方案

我的库有同样的问题，它的组件依赖于react-route-dom. 经过一番调查，我得出的结论是，在我的项目应用程序中，有 2 个版本的react-router-dombundled（甚至是相同的版本），这会创建 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',
  },
},

在这里找到了更深入的信息。

推荐阅读