Error on latest version 4.13.0 - React Router Error: You sho


Topic: Error on latest version 4.13.0 - React Router Error: You should not use Route outside of Router

Nates pro premium asked 6 years ago

Expected behavior Header to display

Actual behavior Error React Router Error: You should not use Route outside of Router

Resources (screenshots, code snippets etc.)

  1. Install CRA
  2. Install MDBReact as per the installation steps
  3. Copy the header code from your MDB website https://mdbootstrap.com/docs/react/navigation/navbar/ (1st one)

import React, { Component } from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom';

import Header from './components/header'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Header />

          <p> test</p>

        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Only getting this on 4.13.0


Jakub Mandra staff premium answered 6 years ago

Hello @Nates,

I see that you have properly wrapped your App in BrowserRouter. The only thing what could not work here is the version of your react-router-dom. mdbreact currently uses 4.3.1, and you do not have to install your copy - the app will use our config.

Best,

Jakub


Nates pro premium answered 6 years ago

import React, { Component } from "react";
import {
  MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
  MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";

class NavbarPage extends Component {
  state = {
    isOpen: false
  };

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

  render() {
    return (
      <MDBNavbar color="indigo" dark expand="md">
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>

        <MDBNavbarToggler onClick={ this.toggleCollapse } />
        <MDBCollapse id="navbarCollapse3" isOpen={ this.state.isOpen } navbar>
          <MDBNavbarNav left>

            <MDBNavItem active>
              <MDBNavLink to="#!">Home</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Features</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Pricing</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Dropdown</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>

          </MDBNavbarNav>
          <MDBNavbarNav right>
            <MDBNavItem>
              <MDBFormInline waves>
                <div className="md-form my-0">
                  <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                </div>
              </MDBFormInline>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>

      </MDBNavbar>
    );
  }
}

export default NavbarPage;

Nates pro premium answered 6 years ago

If I remove this it works fine

<MDBNavItem active>
              <MDBNavLink to="#!">Home</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Features</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Pricing</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Dropdown</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>

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: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags