I am hitting this problem constantly, and have been stuck at it for a long time now. I am new to mbdreact library and I have been trying this example of theirs from this link. This has given me too many problems in debugging and understanding what is going on.
Problem :
You should not use <Route> or withRouter() outside a <Router>
The detailed error trace I could pull is as follows :
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
Code :
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;
What I have found so far :
I have referenced the following StackOverflow posts
from what I am seeing the problem is in the
NavbarPage.js. The articles above tell me 2 things : (First-Thing) to wrap all of the content in<div>which the example link frommdbreacttutorial is already doing & (Second-Thing) to move inside which is also done.I have also tried renaming the import from
BrowserRouter as Routerto justBrowserRouter, and made corresponding refactoring. Even that resulted in the same error.
Looking for help in understanding what is causing this problem, to further my understanding in react, mdbreact.