Does not load the Navbar component, react-bootstrap

Question

I am starting in React.js and I find this problem when making a navigation menu. It does not generate the menu effect that is expected, here is the code:

 import React, {Component} from 'react'; import {Link} from 'react-router-dom'; import { Navbar, Nav, NavItem} from 'react-bootstrap'; export class Menu extends Component { render(){ return ( <Navbar> <Nav> <NavItem componentClass= {Link} href="/" to="/" > Inicio </NavItem> <NavItem componentClass= {Link} href="/Pelicula" to="/Pelicula" > Pelicula </NavItem> </Nav> </Navbar> ); } } export default Menu;

This is the result

It is divided into two components, the top part is the Menu component and the bottom component, Greeting, but the one of my interest is the menu

I hope your help

Answer 1

1. Ensure you include stylesheets

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

React-bootstrap - Getting Started

---

2. Wrap your NavItem in BrowserRouter

---

import React from 'react';
import React, { Component } from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

export class Menu extends Component {
  render() {
    return (
      <Navbar>
        <Nav>
          <BrowserRouter>
            <NavItem componentClass={Link} href="/" to="/">Inicio</NavItem>
          </BrowserRouter>
          <BrowserRouter>
            <NavItem componentClass={Link} href="/Pelicula" to="/Pelicula">Pelicula</NavItem>
          </BrowserRouter>
        </Nav>
      </Navbar>
    );
  }
}

export default Menu;

Stackblitz