我一直在解决这个问题，并且已经困扰了很长时间。我是mbdreact库的新手，我一直在此link中尝试他们的示例。这给了我调试和了解正在发生的事情的太多问题。
问题：
You should not use <Route> or withRouter() outside a <Router>
我可以提取的详细错误跟踪如下：
Uncaught Error: You should not use <Route> or withRouter() outside a <Router>
at invariant (browser.js:34)
at Route.computeMatch (Route.js:96)
at new Route (Route.js:72)
at constructClassInstance (react-dom.development.js:13082)
at updateClassComponent (react-dom.development.js:14978)
at beginWork (react-dom.development.js:15845)
at performUnitOfWork (react-dom.development.js:18879)
at workLoop (react-dom.development.js:18920)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:18127)
at renderRoot (react-dom.development.js:19038)
at performWorkOnRoot (react-dom.development.js:19941)
at performWork (react-dom.development.js:19851)
at performSyncWork (react-dom.development.js:19825)
at requestWork (react-dom.development.js:19680)
at scheduleWork (react-dom.development.js:19487)
at scheduleRootUpdate (react-dom.development.js:20191)
at updateContainerAtExpirationTime (react-dom.development.js:20217)
at updateContainer (react-dom.development.js:20285)
at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20564)
at react-dom.development.js:20718
at unbatchedUpdates (react-dom.development.js:20068)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:20714)
at Object.render (react-dom.development.js:20781)
at Module../src/index.js (index.js:10)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.0 (index.js:15)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
代码：
package.json
{
"name": "test",
"version": "0.0.1",
"private": true,
"dependencies": {
"@material-ui/core": "^3.7.1",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"contentful": "^7.0.5",
"jquery": "^3.3.1",
"mdbreact": "^4.8.6",
"prop-types": "^15.6.2",
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2",
"react-router-dom": "^4.4.0-beta.6",
"react-scripts": "2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
//import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
//serviceWorker.unregister();
App.js
import React from 'react'
import { MDBContainer } from 'mdbreact';
import FixedNavbarExample from './components/navbar/NavbarPage'
const App = () => {
return (
<div>
<FixedNavbarExample/>
<MDBContainer style={{height: 100}} className="text-center mt-5 pt-5">
</MDBContainer>
</div>
)
}
export default App
NavbarPage.js
import React from 'react';
import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FixedNavbarExample extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
const bgPink = {backgroundColor: '#e91e63'}
const container = {height: 1300}
return(
<div>
<Router>
<header>
<MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={ this.onClick } />
<MDBCollapse isOpen = { this.state.collapse } navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Options</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon icon="facebook" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon icon="twitter" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon icon="instagram" /></MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</header>
</Router>
</div>
);
}
}
export default FixedNavbarExample;
我到目前为止发现的内容：
我引用了以下StackOverflow帖子
据我所见，问题出在NavbarPage.js中。上面的文章告诉我两件事：（第一件事）将<div>中的所有内容都包装在mdbreact教程中的示例链接已经在做的＆（第二件事）移入其中也完成了。
我还尝试将导入内容从BrowserRouter as Router重命名为BrowserRouter，并进行了相应的重构。甚至导致相同的错误。
正在寻求帮助以了解导致此问题的原因，以进一步了解react，mdbreact。
答案 0 :(得分：7)
您的react-router-dom版本（beta.6）与mdbreact库不兼容。 如果您安装了稳定版^ 4.3.1，则一切正常。
答案 1 :(得分：0)
相同错误的另一种情况是由于在主要应用组件中缺少 BrowserRouter 标记。我举个例子：
<ApolloProvider>
<BrowserRouter>
.....
<Route path="/register" component={Register} />
.....
</BrowserRouter>
</ApolloProvider>
注意周围的标签。