mmiccolis pro asked 6 years ago


I'm trying a navbar from scratch, using your example in https://mdbootstrap.com/docs/react/navigation/navbar/ "Supported content".

I get this error:
You should not use <Route> or withRouter() outside a <Router>

I got mdb pro version 4.8.3


Bartłomiej Malanowski staff commented 6 years ago

What's the construction of your app? Do <Router> is the "highest" parent of the app? Are you putting the Navbar outside the <Router>?


Jakub Mandra staff answered 6 years ago


Hi,

NavLink component uses "react-router-dom", so you have to set up Routing in your app.

You can do it globally or locally inside component (depends on your needs and your app structure).

f.e.

import React from "react";
import { Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse, FormInline, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa } from "mdbreact";


import { BrowserRouter as Router } from "react-router-dom";


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

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

render() {
return (
<Router>
<Navbar color="default-color" dark expand="md" style={{marginTop: "20px"}}>
<NavbarBrand>
<strong className="white-text">Navbar</strong>
</NavbarBrand>
<NavbarToggler
onClick={this.toggleCollapse}
/>
<Collapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
<NavbarNav left>
<NavItem active>
<NavLink to="#!">Home</NavLink>
</NavItem>
<NavItem>
<NavLink to="#!">Features</NavLink>
</NavItem>
<NavItem>
<NavLink to="#!">Pricing</NavLink>
</NavItem>
<NavItem>
<Dropdown>
<DropdownToggle nav caret>
<div className="d-none d-md-inline">Dropdown</div>
</DropdownToggle>
<DropdownMenu className="dropdown-default"right>
<DropdownItem href="#!">Action</DropdownItem>
<DropdownItem href="#!">Another Action</DropdownItem>
<DropdownItem href="#!">Something else here</DropdownItem>
<DropdownItem href="#!">Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavItem>
</NavbarNav>
<NavbarNav right>
<NavItem>
<NavLink className="waves-effect waves-light" to="#!"><Fa icon="twitter" /></NavLink>
</NavItem>
<NavItem>
<NavLink className="waves-effect waves-light" to="#!"><Fa icon="google-plus" /></NavLink>
</NavItem>
<NavItem>
<Dropdown>
<DropdownToggle nav caret>
<Fa icon="user" />
</DropdownToggle>
<DropdownMenu className="dropdown-default" right>
<DropdownItem href="#!">Action</DropdownItem>
<DropdownItem href="#!">Another Action</DropdownItem>
<DropdownItem href="#!">Something else here</DropdownItem>
<DropdownItem href="#!">Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavItem>
</NavbarNav>
</Collapse>
</Navbar>
</Router>
);
}
}

export default NavbarPage;





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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: laptop
  • Browser: chrome
  • OS: osx 10.12
  • Provided sample code: No
  • Provided link: No