How can I add a link within a DropdownItem with reactstrap?

user_6344531 0
Viewed 23364

How can I add a link within a DropdownItem with reactstrap?

I would like to add a link within a dropdown menu, but how can I add it because in the reactstrap documentation I could not find anything related.

import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';

import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';



export default class NavbarBoots extends React.Component {
    constructor(){
        super();
        this.toogle = this.toogle.bind(this);
        this.state={dropdownMenu:false}

    }
    toogle() {
        this.setState({dropdownMenu:!this.state.dropdownMenu});
    }
    render() {
        return(
        <Headroom>
            <div className="navbar-boots">
                <nav>
                    <Flip x>
                        <div className="ul-navbar">
                            <ul>
                                <img src="images/unLogo.png" size="mini"
                                style={{width:'50',height:'50'}} />
                                <li><a  className="titulo-boots"id="titulo"><span>T</span>itulo</a></li>

                                <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                        <DropdownToggle caret>
                                           Portafolio
                                        </DropdownToggle>
                                        <DropdownMenu className='dropdown-menu'>
                                            <DropdownItem tag={Link} to="/landing" classname='dropdown-item'>ACERCA DE MI</DropdownItem>
                                            <DropdownItem href="#" classname='dropdown-item'><a>PROYECTOS</a></DropdownItem>
                                            <DropdownItem href="http://localhost:3000/vitae" classname='dropdown-item' active>LINKS</DropdownItem>

                                        </DropdownMenu>
                                </ButtonDropdown>
                                <button id="btn"className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </ul>
                        </div>
                    </Flip>
                </nav>  
            </div>  
        </Headroom>
        ); // return
    };
}

it is displayed in this way but I can not add a link

enter image description here

reactstrap reactjs drop-down-menu
12 Answers

Incase anyone else is looking for this, here's the proper straightforward solution.

<DropdownItem tag={Link} to="/me">text here</DropdownItem>

Or if it is meant to be a standard link then,

<DropdownItem tag={a} href="/me">text here</DropdownItem>

Source

user_44493260

if you use react-bootstrap instead of reactstrap an come across same issue you need to:

import { Link } from 'react-router-dom';

<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>
user_34458670

2020 Updated

Looking over these answers suggest Link should come from reactstrap, yet that doesn't export a Link component.

Link should come from react-router-dom. 

import React from "react";
import { Link } from "react-router-dom";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

// ...

<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
  <DropdownToggle caret>Actions</DropdownToggle>
  <DropdownMenu>
    <DropdownItem tag={Link} to={`/action`}>Action</DropdownItem>
  </DropdownMenu>
</ButtonDropdown>
user_10505070
user_82562580

One more option if you ise react router:

import { Link } from 'react-router-dom';

  <DropdownMenu className="dropdown__menu">
     <Link to={`somewhere`}><DropdownItem>Edit</DropdownItem></Link>
  </DropdownMenu>
user_74778190

Had this same issue. Tried originally using withRouter and adding an onClick property which called history.push(newRoute), but just learned of a simpler way:

const DropdownItemLink = props => {
  return <DropdownItem tag={Link} {...props}>{props.title}</DropdownItem>;
};

return (
  <div className="ActionsDropdown">
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
      <DropdownToggle>Actions</DropdownToggle>
      <DropdownMenu>
        {[
          DropdownItemLink({ 
            title: 'title1', 
            to: 'path1',
          }), 
          DropdownItemLink({ 
            title: 'title2', 
            to: 'path2',
          }), 
          ...
        ]}
      </DropdownMenu>
    </Dropdown>
  </div>
);

Need to import Link from 'react-router-dom' library and obviously all the dropdown components from 'reactstrap' library. And also need to properly manage this.state.dropdownOpen and this.toggle according to reactstrap documentation.

user_93608560

Can you add anchor tag to DropdownItem like this?

  <DropdownItem  classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>
user_77294930

I was using react-router Link for few months inside DropdownItem until i realized it didnt worked in firefox !.. It worked fine in chrome.. looks like the right way is to use the onClick prop ... 

<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
user_56467410

The reactstrap documentation is poor.

Examine the src for supported props and render logic

This will render as <a>

You use that syntax in your example so not sure why it doesn't work as DropdownItem hasn't been changed since before you posted.

<DropdownItem href="/link">A link</DropdownItem>
user_14949400

In my case, I have a nested DropDownMenu inside another DropDownMenu.

Add toggle={false} to DropDownMenuItem and override CSS events solved my problem

JSX:

<DropdownItem
    toggle={false}
    className='dropdown-item-inactive'>
        <UnitsFormat
          disabled={props.isLoading}
          unitsFormat={props.unitsFormat}
          onChange={props.onUnitFormatChanged} />
</DropdownItem>

CSS:

.dropdown-item-inactive:active {
    color: inherit!important;
    background-color: #ffffff!important;
}
user_22743000

You are using reactstrap. so this is the best option. in this option, you can set react-router link tag.

<Button tag={Link} color="primary" to="{{url}}">know more</Button>

user_82013720
Related