不变式失败：您不应该在 <Router> 之外使用 <Route>

Question

我使用 react-router-dom 在我的 React 应用程序中进行路由。我的应用程序的一部分提取到另一个包中。依赖项列表如下所示：

./app/dashboard/package.json

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

./app/components/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;

客户端.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'),
);

原文由 Pavel Perevezencev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2个React实例的问题

原文由 Pavel Perevezencev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我通过更改解决了这个问题：

 import {Route, Switch} from "react-router";

到

import {Route, Switch} from "react-router-dom";

只需添加-dom。

原文由 user2552981 发布，翻译遵循 CC BY-SA 4.0 许可协议