React 网站的导航栏

Question

我正在学习反应。我正在尝试创建一个导航栏，并使用浏览器路由器让我的选项卡打开组件作为新页面。（当我点击 navitems 时没有任何反应）我有 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;

然后 App.js 为：

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;

如果我只放这个就可以了：

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;

任何帮助将不胜感激我对此很陌生。

Answer 1

react-bootstrap 没有与 react-router 集成。为此使用 react-router-bootstrap：

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

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

Answer 2

您可以按照 oklas 的建议进行操作，或者将 <NavItem> 替换为 <li> 和 <Link>:

对于 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>
  );
}

对于 v3 及以下版本（您可以在活动路线 link 上添加 activeClassName 样式道具）：

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>
  );
}

只需确保分别从 react-router 导入 NavLink 或 Link。

React 网站的导航栏

Navbar for React Website

javascript

reactjs

react-bootstrap

react-router