Инвариант не удался: вы не должны использовать <Route>вне <Router>

Question

Я использую react-router-dom для маршрутизации в моем React приложении. Часть моего приложения извлечена в другой пакет. Список зависимостей выглядит так:

. / Приложение / панель / package.json

{
  "dependencies": {
    "@app/components": "^1.0.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0"
  }
}

. / Приложение / компоненты / package.json

{
  "peerDependencies": {
    "react-router-dom": "^5.0.0"
  }
}

Когда я использую компоненты из @app/components, для которых требуются компоненты из react-router-dom Я получаю следующие ошибки:

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> 
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>

Почему выдает эту ошибку? В App.js я использую BrowserRouter

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Placeholder } from '@app/components';

const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));

const App = () => (
  <Suspense fallback={<Placeholder />}>
    <Switch>
      <Route path="/auth" component={Auth} />
      <Route path="/" component={Index} />
    </Switch>
  </Suspense>
);

export default App;

client.jsx

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

Answer 1

Я решил эту загадочную ошибку, удалив зависимость 'Reaction-router-dom' из MyComponent.Я удалил 'node_modules / реагировать-router-dom' и из 'package.json' Мое приложение имеет следующую структуру:

    AppFolder
    ├── README.md
    ├── build
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.js
        ├── redux
        │   ├── reducers.js
        │   └── store.js
        └── serviceWorker.js


    MyComponent
    ├── README.md
    ├── dist
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── rollup.config.js
    └── src
        ├── index.js
        ├── styles.css
        └── test.js

Это исходный код для App.js

import MyComponent from 'MyComponent'

export default App(){
 return (
 <div className="App">
    <HashRouter>
      <div>
        <header className="App-header">

        </header>
        <Route path="/home" component={MyComponent}/>
      </div>
    </HashRouter>
  </div>)
}

Это экспорт для MyComponent

export default withRouter(MyComponent);

Если в папке компонентов оставлен «act-router-dom », то появляется ошибка.

Answer 2

Вам также необходимо импортировать именованный экспорт Router из react-router-dom и обернуть его вокруг компонентов коммутатора / маршрута.

const App = () => (
  <Router>
    <Suspense fallback={<Placeholder />}>
      <Switch>
        <Route path="/auth" component={Auth} />
        <Route path="/" component={Index} />
      </Switch>
    </Suspense>
  </Router>
);

Answer 3

Я получил это во время тестирования моего компонента, связанного с проектом (используя npm link), и из-за этого react-router-dom загружался более одного раза, в моем случае работает следующее решение:

Внутри webpack.config.js Я добавил:

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

Answer 4

Проблема с 2 экземплярами реакции

Answer 5

В конце вызова рендеринга после document.getElementById('root').

появляется запятая

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);