Dropdown in Navbar not compatible with React Router

Topic: Dropdown in Navbar not compatible with React Router

Julien “Err0r404” Schmitt free asked 6 years ago

Hello, I'm fairly new to React and MDB so please excuse me if I did something wrong. I've done a Navbar with some NavItem+NavLink and it work preatty well with React-Router: it render the new component without reloading the whole page. Now I want to group some links in dropdowns but it reloads the whole page when clicking a link: I can see a loading icon in the tab. Did I do something wrong or are dropdowns not yet fully compatible with React-Router? Thanks for your time

Add comment

Julien “Err0r404” Schmitt free answered 6 years ago

0 0 Best answer

Thanks for the fast and precise answer!

Tested it and it works perfectly!

Thanks for your help

Jakub Mandra staff commented 6 years ago

I'm glad i could help :) Regards

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

Hello Julien,

You have got to nest <DropdownItem> into <NavLink> if you want a dropdown item to act as a Router link.

Here is example code:

<Dropdown>
  <DropdownToggle caret color="primary">
    Material dropdown
  </DropdownToggle>
  <DropdownMenu>
    <NavLink to="/link_to_somewhere">
      <DropdownItem>Link</DropdownItem>
    </NavLink>
  </DropdownMenu>
</Dropdown>

Best regards,

Jakub from MDB

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Julien “Err0r404” Schmitt

25Support score
2Questions 2Answers 0Snippets