SideNavLink always shows home page as active along with the

Hi @Nates,

Can you pass menuItem.path for Home tab #?

Please check it and tell me if the problem still exists and if the answer is good for you.

Best regards, Konrad.

Thanks, but does not work for me. Pasted entire code below

import React, { useState } from 'react';

import { MDBNavbar, MDBIcon, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBRow } from 'mdbreact';

import { withRouter, Link } from 'react-router-dom';

import logoElement from '../images/logo-element.svg' import logo from '../images/logo.svg'

const MenuPrimary = [ { "icon": "home", "path": "/#", "title": "Home" }, { "icon": "list-ol", "path": "/names", "title": "Names" }, { "icon": "spinner", "path": "/progress", "title": "Progress" }, { "icon": "brain", "path": "/quiz", "title": "Quiz" }, { "icon": "file-audio", "path": "/lectures", "title": "Lectures" }, { "icon": "quran", "path": "/references", "title": "References" } ]

const SideNavPage = (props) => {

// const currentPath = props.location.pathname

const [isOpen, setIsOpen] = useState(false)
const handleToggle = () => {
    setIsOpen(!isOpen)
}

return (

    <MDBNavbar color="white" light fixed="top">
        <MDBContainer fluid className="fixed-sn white-skin" >

            <MDBRow className="mr-2" >
                <MDBIcon icon="bars" onClick={ handleToggle } size="2x" />
                <Link to="/" tag="span"                >
                    <img src={ logoElement } height="32px" width="auto" alt="Logo Element" className="ml-2" />
                </Link>
            </MDBRow>

            <MDBSideNav
                fixed
                logo={ logo }
                triggerOpening={ isOpen }
                breakWidth={ 1300 }
                showOverlay
            >
                <MDBSideNavNav>

                    {
                        MenuPrimary.map((menuItem) => (

                            <div key={ menuItem.title }>
                                <MDBSideNavLink
                                    key={ menuItem.title }
                                    topLevel
                                    onClick={ handleToggle }
                                    to={ menuItem.path }
                                >
                                    <MDBIcon icon={ menuItem.icon } className="mr-2" />
                                    { menuItem.title }
                                </MDBSideNavLink>
                            </div>
                        ))
                    }

                </MDBSideNavNav>
            </MDBSideNav>
        </MDBContainer>
    </MDBNavbar>

);

}

export default withRouter(SideNavPage);

Hi @Nates,

I fixed your code, but it seems that this is a small mistake and I have to analyze what this solution results from.

Of course everything works fine.

I added space in this line { icon: 'home', path: '/ ', title: 'Home' }, and now everything works correctly.

import React, { useState } from 'react';
import {
  MDBNavbar,
  MDBIcon,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBRow
} from 'mdbreact';
import { BrowserRouter as Router, Link } from "react-router-dom"; //If you have Router , please change/remove it

// import {
//   Router,
//   //, withRouter
//   Link
// } from 'react-router-dom';

import logoElement from './assets/img/React-icon.svg'; //I change this line for import my own image (fix errors)
import logo from './assets/img/React-icon.svg';

const MenuPrimary = [
  { icon: 'home', path: '/ ', title: 'Home' },
  { icon: 'list-ol', path: '/names', title: 'Names' },
  { icon: 'spinner', path: '/progress', title: 'Progress' },
  { icon: 'brain', path: '/quiz', title: 'Quiz' },
  { icon: 'file-audio', path: '/lectures', title: 'Lectures' },
  { icon: 'quran', path: '/references', title: 'References' }
];

const SideNavPage = props => {
  // const currentPath = props.location.pathname

  const [isOpen, setIsOpen] = useState(false);
  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <Router>
      <MDBNavbar color='white' light fixed='top'>
        <MDBContainer fluid className='fixed-sn white-skin'>
          <MDBRow className='mr-2'>
            <MDBIcon icon='bars' onClick={handleToggle} size='2x' />
            <Link to='/' tag='span'>
              <img
                src={logoElement}
                height='32px'
                width='auto'
                alt='Logo Element'
                className='ml-2'
              />
            </Link>
          </MDBRow>

          <MDBSideNav
            fixed
            logo={logo}
            triggerOpening={isOpen}
            breakWidth={1300}
            showOverlay
          >
            <MDBSideNavNav>
              {MenuPrimary.map(menuItem => (
                <div key={menuItem.title}>
                  <MDBSideNavLink
                    key={menuItem.title}
                    topLevel
                    onClick={handleToggle}
                    to={menuItem.path}
                  >
                    <MDBIcon icon={menuItem.icon} className='mr-2' />
                    {menuItem.title}
                  </MDBSideNavLink>
                </div>
              ))}
            </MDBSideNavNav>
          </MDBSideNav>
        </MDBContainer>
      </MDBNavbar>
    </Router>
  );
};

export default SideNavPage;

Please check my answer and tell me if the problem still exists.

Best regards, Konrad.

Thanks, but it works in terms of getting the home icon to be become highlighted and un-highlighted on when on other pages...

However, going to the website.com/ becomes it is not website.com/ << with a gap here, it becomes a 404 page.

I can add you to the private repo, what is your Github handle please?

also, every time I respond I get THREE emails.. to the same address

Hi @Nates,

I checked your repo on github and my solution for this time is:

Add/edit line like this

<Route exact path="/ " component={ Home } />

I added space in path.

And in your page with Menu, i also added "space" For your object:

{ "icon": "home", "path": "/ ", "title": "Home" }, //here

Also here

<Link to="/ " tag="span"> //here
      <img src={ logo } height="32px" width="auto" alt="Logo" className="ml-2" />
</Link>

And for SideNav

<MDBSideNav
      logo={ logo }
      triggerOpening={ isOpen }
      breakWidth={ 1300 }
      showOverlay
      href="/ "
>

I think you can also replace Link for MDBNavLink but it must be tested.

Of course, we will try to remove this bug and space if you want to go to the main page.

Best regards, Konrad.

I think this is a bug, my 404 still kicks in even though the correct page is showing after using your fix.

Thanks for the efforts though.