MDBNavbarLink and MDBSideNavLink not working


Topic: MDBNavbarLink and MDBSideNavLink not working

Mazzilli pro premium priority asked 12 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 11 months ago

Could You paste Your code here?


Mazzilli pro premium priority commented 11 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 premium priority commented 11 months ago

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


Wojciech Staniszewski staff answered 11 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 premium priority commented 11 months ago

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


Mazzilli pro premium priority answered 11 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 11 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>

Arvit Faruki pro premium commented 5 months ago

is there any update for this?


Krzysztof Wilk staff commented 5 months ago

Hi!

I'm afraid there's not.

Keep coding!


Please insert min. 20 characters.

FREE CONSULTATION

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

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