Javascript 具有React Router 4实现的物料UI AppBar不工作

我正在用material ui和react router 4构建一个react项目，但我无法得到一个基本示例，我不确定为什么！？我没有任何错误，我有关于react路由器文档的基本示例的所有内容。我似乎无法通过标准的谷歌搜索找到太多的帮助，因为大多数人似乎还没有移动到react router 4。页面上的所有内容都显示得很好，但当我单击选项卡时，路线实际上并没有改变

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;

import React，{Component}来自'React'；
从“物料ui/AppBar”导入AppBar；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/IconMenu”导入IconMenu；
从“物料界面/菜单项”导入菜单项；
从“物料界面/选项卡/选项卡”导入选项卡；
从“物料界面/选项卡/选项卡”导入选项卡；
从“材质ui/svg图标/导航/菜单”导入菜单；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/Navigation.css”导入样式；
const About=（）=>(
关于
);
常量应用=（）=>(
关于
);
类AppBarComponent扩展组件{
状态={
是的，
};
handleChange=（事件，记录）=>{
这个.setState（{logged}）；
};
render（）{
返回(
);
}
}
导出默认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();

从“React”导入React；
从“react dom”导入react dom；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./Navigation/Navigation”导入AppBarComponent；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
,
document.getElementById（'root'），
);
registerServiceWorker（）；

我所看到的stackoverflow问题是使用不同版本的Material UI。我在“材料界面”：“^0.19.1”上，无法使用

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

对于我的版本，我需要使用

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

---

我希望在文档中的某个地方提到这一点……

这一语法是从哪里来的<代码>与中的任何内容都不一样？实际上，您应该使用

onActive

prop手动触发重定向。他们文档中的第一个示例显示了如何导航到新路线。我从这里了解到，您是否运行与他们相同版本的Material UI？不。。。。这就是问题所在。我添加了一个解决我问题的答案。