我react-router-dom在React应用程序中使用路由。我的应用程序的一部分提取到另一个软件包中。依赖项列表如下所示:
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出现以下错误:
@app/components
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
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'), );
有2个React实例的麻烦