Navbar for React Website

Question

I am learning react. I am trying to create a navbar and have my tabs open components as new pages using browser router. (When I click the navitems nothing is happening) I have website_header.js as:

import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';

class Header extends Component {

  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="/">Logo</a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1} href='/'>Home</NavItem>
          <NavItem eventKey={2} href='/Band'>Band</NavItem>
          <NavItem eventKey={3} href='/Discography'>Discography</NavItem>
          <NavItem eventKey={4} href='/Media'>Media</NavItem>
          <NavItem eventKey={5} href='/Contact'>Contact</NavItem>
        </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default Header;

Then App.js as:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch  } from 'react-router-dom';

import Header from './components/website_header';
import Home from './components/website_index';
import Band from './components/website_band';
import Discography from './components/website_discography';
import Media from './components/website_media';
import Contact from './components/website_contact';
import './App.css';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Header />
            <Switch>
              <Route exact path='/' component={Home}/>
              <Route path='/Band' component={Band}/>
              <Route path='/Discography' component={Discography}/>
              <Route path='/Media' component={Media}/>
              <Route path='/Contact' component={Contact}/>
            </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

If I put just this it works:

import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';


class Header extends Component {

  render() {
    return (
      <Navbar brand='React-Bootstrap'>
        <Nav>
          <NavItem eventKey={1} href='/'>Home</NavItem>
          <NavItem eventKey={2} href='/Band'>Band</NavItem>
          <NavItem eventKey={3} href='/Discography'>Discography</NavItem>
          <NavItem eventKey={4} href='/Media'>Media</NavItem>
          <NavItem eventKey={5} href='/Contact'>Contact</NavItem>
        </Nav>
      </Navbar>
    );
  }
}

export default Header;

Any help would be greatly appreciated I am very new to this.

Answer 1

You could do as oklas suggested, or replace <NavItem> with <li> and <Link>:

For react-router v4:

render() {
  return (
    <Navbar brand='React-Bootstrap'>
      <Nav>
        <NavLink to='/'>Home</NavLink>
        <NavLink to='/Band'>Band</NavLink>
        <NavLink to='/Discography'>Discography</NavLink>
        <NavLink to='/Media'>Media</NavLink>
        <NavLink to='/Contact'>Contact</NavLink>
      </Nav>
    </Navbar>
  );
}

and for v3 and below (you may add activeClassName prop for styling on the active route link):

render() {
  return (
    <Navbar brand='React-Bootstrap'>
      <Nav>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/Band'>Band</Link></li>
        <li><Link to='/Discography'>Discography</Link></li>
        <li><Link to='/Media'>Media</Link></li>
        <li><Link to='/Contact'>Contact</Link></li>
      </Nav>
    </Navbar>
  );
}

Just make sure to import NavLink or Link respectively from react-router.

Answer 2

The react-bootstrap has no integration with react-router. Use react-router-bootstrap for that:

import {LinkContainer} from 'react-router-bootstrap'

<LinkContainer to="/home">
  <NavItem eventKey={1}>Home</NavItem>
</LinkContainer>