React компоненты рендеринга библиотеки React Links - PullRequest
Новая
       46

React компоненты рендеринга библиотеки React Links

0 голосов
/ 25 июня 2019

Я разработал библиотеку компонентов React, которую я использую из некоторых своих проектов.

Одним из них является Сборник рассказов, поэтому я создал декоратор 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;

Я хотел бы добавить что-то важное :

Если я добавлю этот псевдоним в конфигурацию 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.

...