대응 구성 요소 라이브러리 렌더링 대응 링크

대응 구성 요소 라이브러리 렌더링 대응 링크

일부 프로젝트에서 사용하고 있는 리액션 컴포넌트 라이브러리를 개발했다.

그 중 하나가 스토리북이다. 그래서 나는 스토리북을 만들었다.BrowserRouter내 이야기에 더하기 위한 장식가 그리고 구성 요소들은 단지 보여주고 노는 목적을 위해 완벽하게 표현된다.

그러나 다른 프로젝트에서 일부 구성 요소를 사용할 경우 다음과 같은 특징이 있다.BrowserRouter내 앱 구성 요소 트리의 최상위 수준에서 다음 오류가 표시됨:

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

여기, 당신은 내가 나의 것으로부터 표현하려고 하는 것의 짧은 조각을 볼 수 있다.ConsumerProject:

인덱스.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;

나는 중요한 것을 추가하고 싶었다.

이 별칭을 의 웹 팩 구성에 추가하는 경우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-route-dom몇 가지 조사를 한 후, 나는 내 프로젝트 앱에 2가지 버전이 있다는 결론을 내렸다.react-router-dom번들(동일한 버전도)으로, 서로 충돌하는 2개의 컨텍스트 인스턴스를 생성한다.

내 경우 해결책은 움직이는 것이었다.react-router-dom로peerDependencies, 웹 팩 구성을 사용하여 라이브러리 빌드에서 제외:

externals: {
  'react-router-dom': {
    root: 'ReactRouterDom',
    commonjs2: 'react-router-dom',
    commonjs: 'react-router-dom',
    amd: 'react-router-dom',
  },
},

여기서 더 심층적인 정보가 발견되었다.

참조URL: https://stackoverflow.com/questions/56750633/react-components-library-rendering-react-links