Topic: navbar issue
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
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;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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>?