使用React Router 4的Material UI AppBar實現不起作用

我正在構建一個使用材質ui的反應項目，並對路由器4做出反應，但我無法獲得一個基本示例，但我不確定原因！？我沒有任何錯誤我擁有關於反應路由器文檔的基本示例。我似乎無法通過標準的谷歌搜索找到很多幫助，因爲大多數人還沒有移動到反應路由器4，但它看起來像。一切都顯示在頁面上，但當我點擊標籤時，路線實際上並沒有改變。使用React Router 4的Material UI AppBar實現不起作用

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();

來源

2017-10-20 Jose

你從哪裏得到這個語法？ ''這看起來不像[文檔]中的任何內容（http://www.material-ui.com/#/組件/標籤）？你實際上應該使用'onActive'支持手動觸發重定向。他們的文檔中的第一個示例顯示瞭如何導航到新路線。 –

我從這裏得到它https://stackoverflow.com/questions/37843495/material-ui-adding-link-component-from-react-router – Jose

您是否運行相同版本的Material-UI？ –

原來我看到的stackoverflow問題是使用不同版本的Material UI。我對「材料-UI」：「^ 0.19.1」，這是不能夠使用

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

對於我的版本我需要使用

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

我想這是什麼地方提到的文檔...

來源

2017-10-20 20:47:21 Jose

使用React Router 4的Material UI AppBar實現不起作用

回答

相關問題