twitter-bootstrap - react-router-dom 与 react-bootstrap 导航

Question

我不确定我是否没有在此处复制某些功能。我正在尝试将 react-bootstrap 与 react-router-dom 结合起来

应用组件:

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import Shapes from './Shapes';
import Images from './Images';
import '../App.css';

class App extends Component {
  render() {
    return (
      <div className='container-fluid'>
        <div>
          <Header />
        </div>
          <Switch>
           <Route exact path='/' component={Home} />
           <Route exact path='/Shapes' component={Shapes} />
           <Route exact path='/Images' component={Images} />
           <Route render={function () {
                 return <p>Not found</p>
           }} />
          </Switch>
      </div>
    );
  }
}

export default App;

标题组件:

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

class Header extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
          <Nav>
            <NavItem eventKey={1} href='/'>
              <NavLink exact activeClassName='active' to='/'>Home</NavLink>
            </NavItem>
            <NavItem eventKey={2} href='/Shapes'>
                <NavLink exact activeClassName='active' to='/Shapes'>Shapes</NavLink>
            </NavItem>
            <NavItem eventKey={3} href='/Images'>
                <NavLink activeClassName='active' to='/Images'>Images</NavLink>
            </NavItem>
          </Nav>
      </Navbar>
    );
  }
}

export default Header;

两件事:

1. 我没有把它复杂化吗？
2. 导航栏没有像我期望的那样水平对齐:

ReactBootstrap Home Shapes Images

它是:

ReactBootstrap

Home

Shapes

Images

请指教。

Answer 1

这应该可以解决问题:

onClick={()=>this.props.history.push('/whatever')}

基于此 Apollo 教程:https://www.howtographql.com/react-apollo/6-more-mutations-and-updating-the-store/