Topic: Broken navbar
MadFox free asked 5 years ago
Piotr Glejzer staff answered 5 years ago
I tested code from navbar examples in our snippets and everything going well with our code. Check this please --> https://mdbootstrap.com/snippets/react/piotr-glejzer/1129095
You probably have some bugs in your code.
MadFox free answered 5 years ago
import React, { Component, lazy, Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'; import './index.css' import Home from './pages/Home'; import About from './pages/About'; import Contacts from './pages/Contacts'; import NotFound from './pages/404'; import Loader from './utils/Loader'; import Social from "./pages/Social"; import GAListener from "./utils/Analytics"; import 'mdbreact/dist/css/mdb.css'; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink } from 'mdbreact';
const Vote = lazy(() => import('./pages/Vote')); const Bans = lazy(() => import('./pages/Bans')); const Store = lazy(() => import('./pages/Store')); const Discord = lazy(() => import('./pages/Discord')); const Feedback = lazy(() => import('./pages/Feedback')); const Rules = lazy(() => import('./pages/Rules'));
class App extends Component { constructor(props) { super(props); this.state = { collapse: false, }; this.onClick = this.onClick.bind(this); }
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
return (
<BrowserRouter>
<Suspense fallback={<Loader/>}>
<GAListener trackingId="UA-134218895-3">
<div>
<header>
<MDBNavbar color="indigo lighten-1" dark expand="md" fixed="top" scrolling>
<MDBNavbarBrand href="/">
<strong>LaserFlare Network</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.onClick} />
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="/">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/vote">Vote for us!</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/bans">Bans</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/discord">Discord</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/social">Social</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/contacts">Contacts</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/feedback">Feedback</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/rules">Rules</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/store">Store</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</header>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/vote' component={Vote} />
<Route path='/bans' component={Bans} />
<Route path='/contacts' component={Contacts} />
<Route path='/social' component={Social} />
<Route path='/store' component={Store} />
<Route path='/discord' component={Discord} />
<Route path='/feedback' component={Feedback} />
<Route path='/rules' component={Rules} />
<Route path='/about' component={About} />
<Route component={NotFound} />
</Switch>
<footer className="page-footer font-small blue">
<div className="footer-copyright text-center py-3">© 2019 Copyright:
<a href="https://laserflare.net"> LaserFlare</a>
</div>
</footer>
</div>
</GAListener>
</Suspense>
</BrowserRouter>
);
}
}
export default App;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.19.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 5 years ago
Can you paste your code about this example? Thanks.