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

Srikanth Nayak free asked 3 years ago


Expected behavior Navbar Actual behavior × ←→3 of 9 errors on the page You should not use or withRouter() outside a ▶ 26 stack frames were collapsed. Module../src/index.js D:/hollerup/src/index.js:10 7 | import App from './App'; 8 | import * as serviceWorker from './serviceWorker'; 9 |

10 | ReactDOM.render(, document.getElementById('root')); 11 | 12 | // If you want your app to work offline and load faster, you can change 13 | // unregister() to register() below. Note this comes with some pitfalls. View compiled webpack_require D:/hollerup/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn D:/hollerup/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled 0 http://localhost:3000/static/js/main.chunk.js:1127:18 webpack_require D:/hollerup/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled checkDeferredModules D:/hollerup/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | return result; View compiled Array.webpackJsonpCallback [as push] D:/hollerup/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:57 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Resources (screenshots, code snippets etc.)

NavBar.js

import React, { Component } from "react"; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon } from "mdbreact"; class NavBar extends Component { state = { isOpen: false };

toggleCollapse = () => { this.setState({ isOpen: !this.state.isOpen }); }

render() { return ( Navbar Home Features Pricing Dropdown Action Another Action Something else here Something else here Action Another Action Something else here Something else here ); } }

export default NavBar;

App.js

import React, { Component } from 'react'; import {BrowserRouter as Router} from 'react-router-dom'; import NavBar from './components/layouts/NavBar'; import Footer from './components/layouts/Footer';

class App extends Component { render() { return ( ); } }

export default App;


Jakub Mandra staff answered 3 years ago


Hi,

In order to use our Navigation components, you have to wrap up your application in react-router-dom's BrowserRouter. It is because we are using Links and NavLinks for navigation.

For example in create-react-app:

//import packages
import React from 'react';
import ReactDOM from 'react-dom';

//import CSS
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import './index.css';

//import components
import App from './App';;

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

Best,

Jakub



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.11.1
  • Device: Lenovo
  • Browser: Google Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes