MDBNavbarLink and MDBSideNavLink not working


Topic: MDBNavbarLink and MDBSideNavLink not working

Mazzilli pro priority asked 2 months ago

*Expected behavior*If configured as , change route path when clicked

*Actual behavior*Nothing happens

In your v4 components everything is working fine but in v5 adding to='route' doesn't work.

UPDATE: My code is exactly as you suggest in this page: https://mdbootstrap.com/docs/b5/react/navigation/navbar/#subsection-nav

Here the code

export default function App() {
  return (
    <MDBNavbar expand='lg' light bgColor='light'>
      <MDBContainer fluid>
        <MDBNavbarBrand href='/'>Navbar</MDBNavbarBrand>
          <MDBNavbarNav>
            <MDBNavbarLink href='/test1'>Test1</MDBNavbarLink>
            <MDBNavbarLink href='/test2'>Test2</MDBNavbarLink>
          </MDBNavbarNav>
      </MDBContainer>
    </MDBNavbar>
  );
}

In this way the link is rendered with and the page is reloaded when I click it. If I try the old approach, using

<MDBNavbarLink to='/test1'>Test1</MDBNavbarLink>

it doesn't work.

This is your v4 documentation https://mdbootstrap.com/docs/react/navigation/navbar/#a-link Here we can find the attribute "to" .


Wojciech Staniszewski staff commented 2 months ago

Could You paste Your code here?


Mazzilli pro priority commented 2 months ago

My code is exactly as you suggest in this page: https://mdbootstrap.com/docs/b5/react/navigation/navbar/#subsection-nav

Here the code export default function App() { return ( Navbar Test1 Test2 ); }

In this way the link is rendered with and the page is reloaded when I click it. If I try the old approach, using Test1 it doesn't work.

This is your v4 documentation https://mdbootstrap.com/docs/react/navigation/navbar/#a-link Here we can find the attribute "to" .


Mazzilli pro priority commented 2 months ago

Pasted code is not shown, I update my question with code example.


Wojciech Staniszewski staff answered 1 months ago

When using MDB5, You should create MDBNavbarLink this way:

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 or yarn.


Mazzilli pro priority commented 1 months ago

It doesn't work. {Link} tag, when explored via devTools, is rendered with {Object Object}


Mazzilli pro priority answered 1 months ago

My updated code (DOESN'T WORK!)

<MDBSideNavItem>
    <MDBSideNavLink tag={Link} to='/user/dashboard'>
        <MDBIcon className='fas fa-tachometer-alt me-3 text-primary' />
            Dashboard
    </MDBSideNavLink>
</MDBSideNavItem>

Wojciech Staniszewski staff answered 1 months ago

Initially, you asked a question about using route with MDBNavbar component. In the code above You use MDBSidenav, which is not yet adapted yet to such a solution. However, we will add this functionality in the next release, so that Your code works. For now, just wrap <MDBSideNavLink> in <Link> like here:

<MDBSideNavItem>
    <Link to='/user/dashboard'>
        <MDBSideNavLink>
            <MDBIcon className='fas fa-tachometer-alt me-3 text-primary' />
                Dashboard
        </MDBSideNavLink>
    </Link>
</MDBSideNavItem>

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Win10x64
  • Provided sample code: No
  • Provided link: Yes
Tags