react-router-domと反応起動ストラップナビゲーション

Question

ここにいくつかの機能を複製していないかどうかはわかりません。

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; 

2つのこと：

1. アムI Iは反応し-ルータ-DOM

   アプリケーションコンポーネントとブートストラップを反応結合しようとしていますそれを過度にしないでください？私はそれを期待するよう

2. ザ・ナビゲーションバーが水平に整列されていません：

ReactBootstrapホームシェイプ画像

それは次のとおりです。

ReactBootstrap

ホーム

の

シェイプ

画像

お知らせください。

Answer 1

代わりの

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

あなただけの私も反応し、ブートストラップ/反応-ルータ-DOMを使用していますが、それは使用して私に何の問題