Question

我正在学习反应。我正在尝试创建一个导航栏并让我的选项卡使用浏览器路由器打开组件作为新页面。（当我点击导航时没有发生任何事情）我将website_header.js作为：

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及以下版本（您可以在活动路径链接上添加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>
  );
}

请务必分别从NavLink导入Link或react-router。

Navbar for React网站

2 个答案: