不变式失败:您不应该使用 <Route>;在 <Router> 之外 [英] Invariant failed: You should not use <Route> outside a <Router>
本文介绍了不变式失败:您不应该使用 <Route>;在 <Router> 之外的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 react-router-dom
在我的 React
应用程序中进行路由.我的应用程序的一部分提取到另一个包中.依赖项列表如下所示:
I use react-router-dom
for routing in my React
application. Part of my app extracted in another package. List of dependencies looks like this:
./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
的组件,我收到此错误:
When I use components from @app/components
which require components from react-router-dom
I getting this errors:
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
Why throws this error? In App.js
I use 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'),
);
推荐答案
React 2 个实例的问题
Trouble with 2 instance of React
这篇关于不变式失败:您不应该使用 <Route>;在 <Router> 之外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文