Topic: react BrowserRouter resulting in “You should not use <Route> or withRouter() outside a <Router>”

sudhishkr free asked 3 years ago


Due to formatting issues, I am also posting the link to my question.

https://stackoverflow.com/questions/53993475/react-browserrouter-resulting-in-you-should-not-use-route-or-withrouter-out

You should not use <Route> or withRouter() outside a <Router>"

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 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 reactmdbreact.


Jakub Mandra staff answered 3 years ago


Hi there @satish24

mdbreact is not yet compatible with react-router-dom v.5 We are using v.4.3.1 for now.

You do not need to install your react-router-dom dependency - your application will use the one from mdbreact.

Stay tuned for updates.

Best,

Jakub


rashesh patel free commented 1 year ago

Hi Jakub, Even after using 4.3.1 version of react-router-dom get the same error.


Krzysztof Wilk staff commented 1 year ago

Hi!

Could you show your code below? This topic has over 2 years, so many things changed. package.json file from your project also could be helpful :)

Best regards


satish24 free answered 3 years ago


Hi [@Jakub Mandra](/profile/?id=40614) I have similar problem. my react-router-dom version 5.0.0.Error : You should not use or withRouter() outside a I have wrapped my components with --------------Index.js------------------------import React from "react";import { render } from "react-dom";import App from "./App";import "mdbreact/dist/css/mdb.css";//import "../src/css/customStyle.css";import { BrowserRouter } from "react-router-dom";render( , document.getElementById("root"));--------------------------------------------------------------------------------------------------------App.js------------------------------//Reactimport React, { Component } from "react";//React-Routerimport { Switch, Route } from "react-router-dom";//React-Componentsimport HomePage from "./components/homePage";import UserHomePage from "./components/userHomePage";import Login from "./components/loginPage";// Redux-storeimport { Provider } from "react-redux";import createStore from "./store/index";const store = createStore();export class App extends Component { render() { return ( ); }}export default App;-------------------------------------------------------------


Jakub Mandra staff answered 3 years ago


Hi there,

Your react-router-dom version (beta.6) is incompatible with mdbreact library. If you install stable version ^4.3.1 everything will work fine.

Here are some links with react-router-dom releases and docs:

https://libraries.io/npm/react-router-dom

https://reacttraining.com/react-router/web/guides/quick-start

 

Release 4.4.0-beta.6 seems to not work at all...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Computer
  • Browser: Chrome
  • OS: Apple
  • Provided sample code: Yes
  • Provided link: Yes