React:在作为node_module导入的共享组件库中使用node_module

Question

我有一个可以工作的共享组件库，我使用node_module将它作为package.json导入到我的前端应用程序中。

我已经构建了一个使用PaginationLinks的NavLink组件。

PaginationLinks.js (在共享组件库中)

import { NavLink } from 'react-router-dom';

const PaginationLinks = {
  return (
    <Container>
      ...
      <NavLink to={"/"}>Home</NavLink>
    </Container>
  );
};

export default PaginationLinks;

在我的前端应用程序中，我已经在我的工作应用程序中设置了反应性路由器和所有这些设置：

routes.js

import { Route, Switch, Redirect } from 'react-router';
import React from 'react';
import { history } from './redux/store';
import { ConnectedRouter } from 'connected-react-router';
...

function App() {
  return (
    <ConnectedRouter history={history}>
      <Switch>
        <BasePage>
          <Switch>
            <Route
              exact
              path="/"
              component={HomePage}
            />
            ...
          </Switch>
        </BasePage>
      </Switch>
    </ConnectedRouter>
  );
}

FYI，这已经是一个应用程序，我有现有的路线和导入NavLink没有问题。

然而，当我试图将我的组件导入我的应用程序时，它在抱怨我的NavLink不在路由器内：

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

import React from 'react';
import { NavLink } from 'react-router-dom';
import PaginationLinks from '@my-lib/ui/components/PaginationLinks';
import H1 from '@my-lib/ui/components/H1';

const HomePage = () => (
  <div>
    <H1>hello</H1> // this works
    <NavLink to="/somewhere">somewhere</NavLink> // this works
    <PaginationLinks /> // this breaks the app
  </div>;

)

export default HomePage;

如何在共享组件库中使用NavLink？在共享组件库中将PaginationLinks封装在路由器中是没有意义的。

Answer 1

我通过使用peerDependencies +将这些依赖项移动到devDependencies来修复它。我的假设是，节点将按照以下顺序扫描依赖项：

1. dependencies在我的共享组件库的package.json
2. dependencies中，在我的React应用程序

中

因此，我必须将routing库移动到devDependencies中，这样我仍然可以在本地运行我的故事书服务器，并且在我的react应用程序中仍然正确地加载共享组件node_module。

这是我的package.json

  "name": "mypackage",
  "version": "0.6.3",
  "dependencies": {
    ...
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "styled-components": "^4.4.1",
    "react-dom": "^16.12.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "start-storybook -p 9009",
    "eslint": "eslint --ignore-path .gitignore ./",
    "eslint:fix": "eslint --fix --ignore-path .gitignore ./",
    "prettier": "prettier -c ./",
    "prettier:fix": "prettier --write ./"
  },
  ...
  "devDependencies": {
    ...
    "react": "^16.13.1",
    "styled-components": "^4.4.1",
    "react-dom": "^16.12.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged",
      "pre-push": "npm run eslint"
    }
  }
}