trying to implement Material Design Navbar in React

I’m scratching my head here trying to figure out why I can’t see the styling applied to my Navbar. I’ve installed all of the necessary modules but it’s not happening. My code is below. I was working on a custom Navbar but the material one is very slick so I wanted to try it instead.

Navbar code

import React, { useState } from 'react';
import {
  MDBContainer,
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarToggler,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBBtn,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBDropdownLink,
  MDBCollapse
} from 'mdb-react-ui-kit';

export default function NavbarMaterial() {
  const [showBasic, setShowBasic] = useState(false);

  return (
    <MDBNavbar expand='lg' light bgColor='light'>
      <MDBContainer fluid>
        <MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>

        <MDBNavbarToggler
          aria-controls='navbarSupportedContent'
          aria-expanded='false'
          aria-label='Toggle navigation'
          onClick={() => setShowBasic(!showBasic)}
        >
          <MDBIcon icon='bars' fas />
        </MDBNavbarToggler>

        <MDBCollapse navbar show={showBasic}>
          <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
            <MDBNavbarItem>
              <MDBNavbarLink active aria-current='page' href='#'>
                Home
              </MDBNavbarLink>
            </MDBNavbarItem>
            <MDBNavbarItem>
              <MDBNavbarLink href='#'>Link</MDBNavbarLink>
            </MDBNavbarItem>

            <MDBNavbarItem>
              <MDBDropdown>
                <MDBDropdownToggle tag='a' className='nav-link'>
                  Dropdown
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem>
                    <MDBDropdownLink>Action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink>Another action</MDBDropdownLink>
                  </MDBDropdownItem>
                  <MDBDropdownItem>
                    <MDBDropdownLink>Something else here</MDBDropdownLink>
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavbarItem>

            <MDBNavbarItem>
              <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                Disabled
              </MDBNavbarLink>
            </MDBNavbarItem>
          </MDBNavbarNav>

          <form className='d-flex input-group w-auto'>
            <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
            <MDBBtn color='primary'>Search</MDBBtn>
          </form>
        </MDBCollapse>
      </MDBContainer>
    </MDBNavbar>
  );
}

Here’s the code from my App.js with said Navbar

import React from "react";
import { Routes, Route } from 'react-router-dom';
import Header from './components/Header'
import NavbarBasic from './components/NavbarBasic';
import NavbarMaterial from './components/NavbarMaterial';
import About from './components/pages/About';
import Pests from './components/pages/Pests';
import { Ants, Bees, Roaches, Mice, Wasps, Bedbugs, Flies } from './components/Pests';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Contact from './components/pages/Contact';

function App() {
  return (
    <div className="main">
      <Header />
      <NavbarMaterial />
      {/* These are the main routes and subpages */}
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/pests-we-treat' element={<Pests />} />
        <Route path='/services' element={<Services />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/ants' element={<Ants />} />
        <Route path='/wasps' element={<Wasps />} />
        <Route path='/roaches' element={<Roaches />} />
        <Route path='/bedbugs' element={<Bedbugs />} />
        <Route path='/bees' element={<Bees />} />
        <Route path='/mice' element={<Mice />} />
        <Route path='/flies' element={<Flies />} />
      </Routes>
    </div>
  );
}

export default App;

Here’s my package JSON file with the dependencies.

{
  "name": "weinerpest",
  "homepage": "http://weinerpestservices.com",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/material": "^5.0.4",
    "@mui/styles": "^5.2.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.3",
    "history": "^5.1.0",
    "mdb-react-ui-kit": "^2.1.0",
    "mdbreact": "^5.2.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.2",
    "react-dropdown": "^1.9.2",
    "react-dropdown-router": "^1.0.1",
    "react-responsive": "^9.0.0-beta.4",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "react-select": "^5.2.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer

When using MDB5, You should create MDBNavbarLink this way:

<MDBNavbarLink tag={Link} to='/test1'>Test1</MDBNavbarLink>

import { Link } from 'react-router-dom';
export default function App() {
      return (
        <MDBNavbar expand='lg' light bgColor='light'>
          <MDBContainer fluid>
            <MDBNavbarBrand href='/'>Navbar</MDBNavbarBrand>
              <MDBNavbarNav>
                <MDBNavbarLink tag={Link} to='/test1'>Test1</MDBNavbarLink>
                <MDBNavbarLink tag={Link} to='/test2'>Test2</MDBNavbarLink>
              </MDBNavbarNav>
          </MDBContainer>
        </MDBNavbar>
      );
    }

Make sure that react-router-dom is installed in the project. If not, add it with npm i react-router-dom

Advertisement

Answer