Navbar Router not working

Topic: Navbar Router not working

Marie Jacquier asked a year ago

Hi, I am trying to get this fixed Navbar to work, however I am not managing to make the router work. I think something is wrong with my code or maybe the version of the router... Does anyone have a clue ? thank you

NavBar.js **

import React from 'react';
import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
// import img from './swapit.svg'

class FixedNavbarExample extends React.Component {
  constructor(props) {
      this.state = {
          collapse: false,
      this.onClick = this.onClick.bind(this);

  onClick() {
        collapse: !this.state.collapse,

  render() {
    const bgPink = {backgroundColor: 'blue'}
    const container = {height: 1300}
        <MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
          <MDBNavbarBrand href="/">
             {/* <img src="swapit.svg"></img> */}
          <MDBNavbarToggler onClick={ this.onClick } />
          <MDBCollapse isOpen = { this.state.collapse } navbar>
            <MDBNavbarNav right>
              <MDBNavItem active>
                  <MDBNavLink to="/">Home</MDBNavLink>
                  <MDBNavLink to="/login">Login</MDBNavLink>
                  <MDBNavLink to="/register">Register</MDBNavLink>


export default FixedNavbarExample;

** App.js **

import "./App.css";
import NavBar from "./components/NavBar";
import { BrowserRouter as BrowserRouter, Switch, Route } from "react-router-dom";
import { Home } from "./components/Pages/Home";
import { Login} from "./components/Pages/Login";
import { Register } from "./components/Pages/Register";

function App() {
  return (
    <NavBar />

        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />

export default App;


Piotr Glejzer staff commented a year ago

try to remove inside FixedNabarComponent

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: destop
  • Browser: mozilla
  • OS: linux
  • Provided sample code: No
  • Provided link: No