javascript - 带有 React Router 4 实现的 Material UI AppBar 不起作用

Question

我正在使用 material ui 和 React router 4 构建一个 React 项目，但我无法让一个基本示例正常工作，我不确定为什么!？我没有任何错误，我拥有关于 React 路由器的所有基本示例文档有。我似乎无法通过标准的谷歌搜索找到太多帮助，因为大多数人还没有转移到 React 路由器 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;

这是我的 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 问题使用的是不同版本的 Material UI。我在 "material-ui": "^0.19.1"无法使用

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

对于我需要使用的版本

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

我希望在文档的某处提到这一点...