Dropdown with react router

Topic: Dropdown with react router

Roman Mzh priority asked 5 years ago

Expected behavior

to property for MDBDropdownItem

correct styling of Link inside

Actual behavior

MDBDropdownItem has a href prop which reloads a page on click.

AND

Link creates a a element styled as a link (blue and darker blue on hover).

Resources (screenshots, code snippets etc.)

dropdown with links

Add comment

Jakub Chmura staff answered 5 years ago

0 0 Best answer

Hi <a href="/profile/?id=64600" target="_blank" rel="nofollow">@Roman Mzh</a>,

Thank you very much for your feedback!

I think we should fix this in near future but for now you can use <code>MBDNavLink</code> with <code>link</code> prop.
Look at snippet below.

<pre class="prettyprint"><code> <MDBDropdownItem>
 <MDBDropdownToggle caret color='primary'>
 Dropdown
 </MDBDropdownToggle>
 <MDBDropdownMenu>
 <MDBDropdownItem>
 <MDBNavLink link to='#' className='text-dark p-0'>
 Action
 </MDBNavLink>
 </MDBDropdownItem>
 <MDBDropdownItem>
 <MDBNavLink link to='#' className='text-dark p-0'>
 NavLink with props
 </MDBNavLink>
 </MDBDropdownItem>
 <MDBDropdownItem>
 <MDBNavLink link to='#' className='text-dark p-0'>
 Something else here
 </MDBNavLink>
 </MDBDropdownItem>
 <MDBDropdownItem divider />
 <MDBDropdownItem>
 <MDBNavLink link to='#' className='text-dark p-0'>
 Separated link
 </MDBNavLink>
 </MDBDropdownItem>
 </MDBDropdownMenu>
 </MDBDropdownItem>
</code></pre>

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

Please insert min. 20 characters.

Hi @Roman Mzh,

Thank you very much for your feedback!

I think we should fix this in near future but for now you can use MBDNavLink with link prop. Look at snippet below.

   <MDBDropdownItem>
          <MDBDropdownToggle caret color='primary'>
            Dropdown
          </MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem>
              <MDBNavLink link to='#' className='text-dark p-0'>
                Action
              </MDBNavLink>
            </MDBDropdownItem>
            <MDBDropdownItem>
              <MDBNavLink link to='#' className='text-dark p-0'>
                NavLink with props
              </MDBNavLink>
            </MDBDropdownItem>
            <MDBDropdownItem>
              <MDBNavLink link to='#' className='text-dark p-0'>
                Something else here
              </MDBNavLink>
            </MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem>
              <MDBNavLink link to='#' className='text-dark p-0'>
                Separated link
              </MDBNavLink>
            </MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdownItem>

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

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: Priority
Premium support: Yes
Technology: MDB React
MDB Version: 4.23.0
Device: pc
Browser: chrome
OS: ubuntu 18.04
Provided sample code: Yes
Provided link: No

Roman Mzh

207Support score
19Questions 11Answers 1Snippets