¿如何在带有reactstrap的DropdownItem中添加链接？

Question

如何在带有reactstrap的DropdownItem中添加链接？

我想在下拉菜单中添加一个链接，但是如何添加它，因为在reactstrap文档中我找不到任何相关的内容。

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
    };
}

它以这种方式显示，但我无法添加链接

Answer 1

如果您使用 react-bootstrap 而不是 reactstrap 遇到同样的问题，您需要：

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

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

Answer 2

如果其他人正在寻找这个，这是正确的简单解决方案。

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

或者，如果要成为标准链接，

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

资源

Answer 3

<DropdownMenu>
   <DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>

来源： https: //reactstrap.github.io/components/dropdowns/

Answer 4

2020 更新

查看这些答案表明Link应该来自reactstrap，但不会导出Link组件。

Link应该来自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>

Answer 5

您可以像这样向 DropdownItem 添加锚标记吗？

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