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 frommdbreact
tutorial is already doing & (Second-Thing) to move inside which is also done.I have also tried renaming the import from
BrowserRouter as Router
to 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
.