Material UI AppBarとリアクタのルータ4実装が動作しない

Question

私はリアクションのプロジェクトを材料uiとリアクタのルータ4で構築していますが、基本的な動作例は得られませんし、なぜわからないのですか？私は反応ルータのドキュメントにある基本的な例をすべて持っています。私はほとんどの人がルータ4を反応させるために移動していないので、標準的なGoogle検索を通して非常に多くの助けを見つけることができないようです。すべてがページ上に表示されますが、タブをクリックすると実際には変更されません。

import React, { Component } from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import IconMenu from 'material-ui/IconMenu'; 
import MenuItem from 'material-ui/MenuItem'; 
import Tabs from 'material-ui/Tabs/Tabs'; 
import Tab from 'material-ui/Tabs/Tab'; 
import Menu from 'material-ui/svg-icons/navigation/menu'; 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import styles from './Navigation.css'; 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
); 

const App =() => (
    <div> 
    <h2>About</h2> 
    </div> 
); 

class AppBarComponent extends Component { 
    state = { 
    logged: true, 
    }; 

    handleChange = (event, logged) => { 
    this.setState({ logged }); 
    }; 

    render() { 
    return (
     <Router> 
     <div> 
      <AppBar 
      title="Title" 
      iconElementLeft={ 
       <IconMenu 
       iconButtonElement={<IconButton className={styles.mobileNav}><Menu /></IconButton>} 
       iconStyle={{ color: '#fff' }} 
       > 
       <MenuItem primaryText="Menu Item 1" /> 
       <MenuItem primaryText="Menu Item 2" /> 
       <MenuItem primaryText={this.state.logged ? 'Welcome user' : 'Login'} /> 
       </IconMenu> 
      } 
      > 
      <Tabs className={styles.desktopNav}> 
       <Tab label="Menu Item 1" component={Link} to="/" /> 
       <Tab label="Menu Item 2" component={Link} to="/about" /> 
       <Tab label={this.state.logged ? 'Welcome user' : 'Login'} /> 
      </Tabs> 
      </AppBar> 
      <Route exact path="/" component={App} /> 
      <Route path="/about" component={About} /> 
     </div> 
     </Router> 
    ); 
    } 
} 

export default AppBarComponent; 

これは私のindex.jsファイルです。これはかなり基本的なものではありません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import AppBarComponent from './Navigation/Navigation'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <MuiThemeProvider> 
    <AppBarComponent /> 
    </MuiThemeProvider>, 
    document.getElementById('root'), 
); 
registerServiceWorker(); 

Answer 1

私が見ていたstackoverflowの質問は、異なるバージョンのマテリアルUIを使用していました。私は、「材料-UI」に午前：私は、これは上のどこかに言及された希望

<Tab label="Menu Item 1" containerElement={<Link to="/" />}/> 

を使用するために必要な私のバージョンについて

<Tab label="Menu Item 1" component={Link} to="/" /> 

を使用することができません「^ 0.19.1」ドキュメント...