¿Comment puis-je ajouter un lien à l'intérieur d'un DropdownItem avec reactstrap ?

Question

Comment puis-je ajouter un lien dans un DropdownItem avec reactstrap?

J'aimerais ajouter un lien dans un menu déroulant, mais comment puis-je le faire car je n'ai rien trouvé dans la documentation de 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(

                                Titulo

                                           Portafolio

                                            ACERCA DE MI
                                            PROYECTOS
                                            LINKS

                                 Accounts.logout()}>Se déconnecter

        ); // return
    };
}

Il est affiché ainsi mais je ne peux pas ajouter de lien

Answer 1

Si quelqu'un d'autre recherche cela, voici la solution simple et directe appropriée.

text here

Ou si cela doit être un lien standard alors,

text here

Source

Answer 2

Assurez-vous d'avoir react-router-bootstrap installé. LinkContainer est le composant qui rendra le lien cliquable. Il doit être placé en dehors de DropdownItem pour fonctionner dans Firefox. De plus, ajouter className="collapse" au composant Collapse cachera le menu initialement dans Firefox.

npm install react-router-bootstrap --save

Prérequis :

npm install --save bootstrap@4.0.0
npm install --save reactstrap@next
npm install --save jquery@1.9.1
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 (

                My Site

                Accueil

                    Lien 1

                        Sous Lien 1

                    Déconnexion                                        

    )
    }
}

export default MyComponent;

Answer 3

   YourLink

source: https://reactstrap.github.io/components/dropdowns/

Answer 4

Avait le même problème. J'ai d'abord essayé d'utiliser withRouter et d'ajouter une propriété onClick qui appelait history.push(newRoute), mais je viens de découvrir une façon plus simple :

const DropdownItemLink = props => {
  return {props.title};
};

return (

      Actions

        {[
          DropdownItemLink({ 
            title: 'titre1', 
            to: 'chemin1',
          }), 
          DropdownItemLink({ 
            title: 'titre2', 
            to: 'chemin2',
          }), 
          ...
        ]}

);

Il est nécessaire d'importer Link depuis la bibliothèque 'react-router-dom' et évidemment tous les composants du menu déroulant depuis la bibliothèque 'reactstrap'. Il est également nécessaire de gérer correctement this.state.dropdownOpen et this.toggle selon la documentation de reactstrap.

Answer 5

Pouvez-vous ajouter une balise d'ancre à DropdownItem comme ceci?

    LIENS