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 主页形状图像

它是：

ReactBootstrap

首页

形状

图片

请指教。

Answer 1

这应该可以解决问题：

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

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