5
votes

Reactstrap Bootstrap Navbar ne fonctionne pas dans l'application Reactstrap

J'ai créé une application de réaction avec "create react-app".

J'essaie maintenant d'ajouter une barre de navigation depuis Reactstrap. Je fais un copier-coller à partir de Reactstrap (j'ajoute ceci comme un composant de réaction) site Web :

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

et cela ne fonctionne pas. Je reçois ceci dans mon application de réaction:

 navbar in react app

J'ai eu des problèmes similaires avec Bootstrap, React et Navbar avant mais je suis vraiment surpris cela se passe dans Reactstrap. Savez-vous pourquoi?


2 commentaires

vous devez importer le css import 'bootstrap / dist / css / bootstrap.min.css'; comme indiqué dans la documentation reactstrap.github.io


Merci! Cela marche. J'ai aussi ajouté bootstrap. Je ne savais pas que je devrais le faire en plus en utilisant Reactstrap. Merci pour l'aide!


3 Réponses :


2
votes

Vous pouvez le faire.

import { NavLink } from 'reactstrap';
import { NavLink as ReactLink } from 'react-router-dom';

<NavLink tag={ReactLink} to="/home" activeClassName="active" >Home</NavLink>


0 commentaires

5
votes

Vous devez également bootstrap et react-dom:

import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap'; 

npm install --save bootstrap
npm install --save reactstrap react react-dom


0 commentaires

2
votes

Vous devez vous assurer que

import 'bootstrap/dist/css/bootstrap.css';

a été importé dans le fichier index.js créé automatiquement lorsque vous créez l'application react.


0 commentaires