Topic: MDBNavbarLink and MDBSideNavLink not working

Mazzilli priority asked 3 years 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 3 years ago

Could You paste Your code here?


Mazzilli priority commented 3 years 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 priority commented 3 years ago

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



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 free commented 2 years ago

is there any update for this?


Krzysztof Wilk staff commented 2 years ago

Hi!

I'm afraid there's not.

Keep coding!


Mazzilli priority commented 2 years ago

Any update on this side?


Wojciech Staniszewski staff commented 2 years ago

We will add the tag property in the next release.


Miller42 free commented 2 years ago

Still no update on this!! Cmon guys...


Mazzilli priority answered 3 years 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>


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 priority commented 3 years ago

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



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Win10x64
  • Provided sample code: No
  • Provided link: Yes