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

  • link1

  • link2

• 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 from mdbreact 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 just BrowserRouter, 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.