Reactstrap Bootstrap Navbar not working in react app
Solution 1
You need also bootstrap, and react-dom:
npm install --save bootstrap
npm install --save reactstrap react react-dom
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';
Solution 2
You should make sure you have
import 'bootstrap/dist/css/bootstrap.css';
imported into the index.js
file created automatically when you create react app.
Solution 3
You can do this.
import { NavLink } from 'reactstrap';
import { NavLink as ReactLink } from 'react-router-dom';
<NavLink tag={ReactLink} to="/home" activeClassName="active" >Home</NavLink>
Talita
I love to write code. I am excited to work in technologies I know and like as well as to learn new programming languages, design patterns and approaches to problems. I care about code correctness as much as about its performance and simplicity. I write unit tests and prefer to do TDD. I like to be a part of a team and be fully engaged in the project. Python and ES6 are my favourite technologies at the moment by I have experience in many more and a will to learn.
Updated on June 19, 2022Comments
-
Talita almost 2 years
I created a react app with 'create react-app'.
I am trying now to add a navbar from Reactstrap. I do copy-paste from Reactstrap (I am adding this as one react component) website:
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> ); } }
and it does not work. I am getting this in my react app:
I had similar problems with Bootstrap, React and Navbar before but I am really surprised it is happening in Reactstrap. Do you know why is it so?