react-router-dom與react-bootstrap導航

Question

我不確定是否我不在這裏複製一些功能。我想結合反應的自舉與反應路由器-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

而不是

<NavItem eventKey={1} href='/'> 
    <NavLink exact activeClassName='active' to='/'>Home</NavLink> 
</NavItem> 

你應該能夠只使用

<NavItem eventKey={1} href="/">Home</NavItem> 

我也是用的反應，引導/反應路由器-DOM和它