reactjs - 在外部包中使用 Route 或 Link 时 React Router Invariant 失败

Question

我有一个组件库包，其中我拥有一些组件，我想将这些组件呈现到另一个团队拥有的应用程序中。我希望能够使用像 <Route /> 这样的东西和 <Link />在我的组件包中，但出现类似 Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> 的错误当我尝试这样做时。

我在其中渲染我的组件的应用程序已经设置并运行了 React 路由器。它呈现一个 <BrowserRouter />像往常一样接近顶层。尝试使用 Link 时或 Route从应用程序本身的任何文件中，它都可以正常工作。似乎我无法从外部导入路由器的东西并使用它。

---

总结

这不起作用:

/* MyExternalComponent.js (this is in my external package) */

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

const MyExternalPackage = () => (
  <Link to="/about">About</Link> // This throws the "Invariant failed" error
);

/* SomePage.js (this is in the actual app) */

import React from 'react';
import { MyExternalComponent } from 'my-external-package';

const SomePage = () => (
  <MyExternalComponent />
);

---

但是，这确实有效:

/* MyExternalComponent.js (this is in my external package) */

import React from 'react';

const MyExternalPackage = ({ children }) => (
  <h1>hi</h1>
);

/* SomePage.js (this is in the actual app) */

import React from 'react';
import { Link } from 'react-router-dom';
import { MyExternalComponent } from 'my-external-package';

const SomePage = () => (
  <MyExternalComponent />
  <Link to="/about" /> // I can render the link from the same context where I am rendering my component...
);

---

这也有效:

/* MyExternalComponent.js (this is in my external package) */

import React from 'react';

const MyExternalPackage = ({ children }) => (
  {children} // Renders a link that routes me to /about
);

/* SomePage.js (this is in the actual app) */

import React from 'react';
import { Link } from 'react-router-dom';
import { MyExternalComponent } from 'my-external-package';

const SomePage = () => (
  <MyExternalComponent>
    <Link to="/about" />
  </MyExternalComponent>
);

---

无论出于何种原因，这个问题似乎只在我导入 Route 时发生或 Link从我的包裹里。当我将它们渲染为组件的子级时，一切正常。我不确定为什么会发生这种情况，因为很明显路由在应用程序本身内起作用，并且我在 <Link /> 的位置呈现我的组件。工作正常。

如有任何建议/提示，我们将不胜感激!

Answer 1

编辑

要解决 React/React Router 由于 npm link 而最终在消费者/依赖包中有多个实例的问题，您可以在 webpack.config 中添加类似的内容.js:

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-router': path.resolve('./node_modules/react-router'),
    'react-router-dom': path.resolve('./node_modules/react-router-dom')
  }
},

这将确保在两个地方都只使用消费者版本的 React/React Router。

---

原文:

事实证明，这个问题是因为我是如何通过在我的组件包中使用 npm link + 来自 npm link my-external-package 进行本地开发的应用程序。我猜因为这个链接发生了一些 node_modules 问题..