¿Как я могу добавить ссылку в DropdownItem с помощью reactstrap?

Если кто-то еще это ищет, вот правильное простое решение.

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

Или, если это стандартная ссылка, тогда

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

Источник

если вы используете response-bootstrap вместо reactstrap, вы столкнетесь с той же проблемой, что вам нужно:

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

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

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>

Убедитесь, что у вас установлен response-router-bootstrap. LinkContainer - это компонент, который сделает ссылку интерактивной. Он должен быть размещен вне DropdownItem, чтобы он работал в Firefox. Кроме того, добавление className = "collapse" к компоненту Collapse изначально скроет меню в Firefox.

npm install react-router-bootstrap --save

Предварительные условия:

npm install --save [email protected]
npm install --save reactstrap@next
npm install --save [email protected]
npm install --save react-transition-group
npm install --save react-popper

import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar, 
    NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';

class MyComponent extends Component{
    constructor(props) {
        super(props);

        this.toggleNavbar = this.toggleNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    toggleNavbar() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }
    render(){
    return (
      <div>            
        <Navbar color="faded" light expand="md">
            <NavbarBrand href="/">
                <a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
                <a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
            </NavbarBrand>                
            <NavbarToggler onClick={this.toggleNavbar} />
            <Collapse isOpen={this.state.isOpen} navbar className="collapse">
              <Nav className="ml-auto" navbar pullRight>
                <NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Link 1
                  </DropdownToggle>
                  <DropdownMenu >
                    <LinkContainer to="/sub-link1">
                        <DropdownItem>Sub Link 1</DropdownItem>
                    </LinkContainer>
                  </DropdownMenu>
                </UncontrolledDropdown>                    
                <LinkContainer to="/logout">
                    <NavItem><NavLink>Logout</NavLink></NavItem>                                        
                </LinkContainer>
              </Nav>
            </Collapse>
        </Navbar>
      </div>
    )
    }
}

export default MyComponent;

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

источник: https://reactstrap.github.io/components/dropdowns/

Была такая же проблема. Первоначально пробовал использовать withRouter и добавлять свойство onClick, которое называлось history.push (newRoute), но только что узнал о более простом способе:

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

Необходимо импортировать ссылку из библиотеки response-router-dom и, очевидно, все компоненты раскрывающегося списка из библиотеки reactstrap. А также необходимо правильно управлять this.state.dropdownOpen и this.toggle в соответствии с документацией responsestrap.

Еще один вариант, если вы реагируете на маршрутизатор:

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

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

Можете ли вы добавить тег привязки в DropdownItem вот так?

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

Я использовал ссылку на реактивный маршрутизатор в течение нескольких месяцев внутри DropdownItem, пока не понял, что он не работает в firefox! .. Он отлично работал в Chrome ... похоже, правильный способ - использовать опору onClick ...

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

Документация по reactstrap оставляет желать лучшего.

Изучите src на предмет поддерживаемых свойств и логики рендеринга

Это будет отображаться как ‹a›

Вы используете этот синтаксис в своем примере, поэтому не знаете, почему он не работает, поскольку DropdownItem не изменялся с момента публикации.

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

В моем случае у меня есть вложенный DropDownMenu внутри другого DropDownMenu.

Добавить toggle={false} в DropDownMenuItem и переопределить события CSS, решившие мою проблему

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

Вы используете reactstrap. так что это лучший вариант. в этой опции вы можете установить тег ссылки response-router.

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