带有 React Router 4 实现的 Material UI AppBar 不起作用答案

【问题标题】：Material UI AppBar with React Router 4 Implementation not working带有 React Router 4 实现的 Material UI AppBar 不起作用
【发布时间】：2026-02-01 09:50:01
【问题描述】：

我正在使用材料 ui 和反应路由器 4 构建一个反应项目，但我无法获得一个基本示例，我不确定为什么！？我没有任何错误，我拥有反应路由器的所有基本示例文档有。我似乎无法通过标准的谷歌搜索找到太多帮助，因为大多数人还没有移动到对路由器 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();

【问题讨论】：

你从哪里得到这个语法？ <Tab label="Menu Item 1" component={Link} to="/" /> 这看起来不像their docs 中的任何东西？您实际上应该使用 onActive 道具来手动触发重定向。他们文档中的第一个示例显示了如何导航到新路线。
我从这里得到它*.com/questions/37843495/…
您运行的 Material-UI 版本是否与他们相同？
不......这就是问题所在。我添加了一个解决我问题的答案。

标签： javascript reactjs react-router material-ui

【解决方案1】：

原来我正在查看的 * 问题是使用不同版本的 Material UI。我在“material-ui”：“^0.19.1”上无法使用

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

对于我需要使用的版本

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

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

【讨论】：