Dropdown in Navbar not compatible with React Router

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Dropdown in Navbar not compatible with React Router

Julien “Err0r404” Schmitt 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

Jakub Mandra staff premium answered 6 years ago

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

Julien “Err0r404” Schmitt answered 6 years ago

Thanks for the fast and precise answer!

Tested it and it works perfectly!

Thanks for your help

Jakub Mandra staff premium commented 6 years ago

I'm glad i could help :) Regards
Write
Create snippet
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
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Julien “Err0r404” Schmitt
25Support score
2Questions 2Answers
0Snippets likes 0Snippets