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 priority commented 1 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>
Hire our experts to help you design or build a dedicated project.
VIEW SERVICESAnswered
- 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 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.