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" .
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...
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}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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.