Question

我正在用物质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();

Answer 1

原来我正在查看的stackoverflow问题是使用不同版本的Material UI。我在＆＃34; material-ui＆＃34;：＆＃34; ^ 0.19.1＆＃34;哪个无法使用

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

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

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

我希望在文档的某个地方提到这个......

具有React Router 4实现的物料UI AppBar无法正常工作

1 个答案: