Topic: MDBNavbarLink and MDBSideNavLink not working
*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" .
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}
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>
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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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.