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:
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?
3 Réponses :
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>
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
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.
vous devez importer le css
import 'bootstrap / dist / css / bootstrap.min.css';comme indiqué dans la documentation reactstrap.github.ioMerci! 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!