Topic: Broken navbar
                  
                  MadFox
                  free
                  asked 6 years ago
                
                      
                      Piotr Glejzer
                      staff
                        answered 6 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 6 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 6 years ago
Can you paste your code about this example? Thanks.