I am building a react project with material ui and react router 4 but I can't get a basic example working and I am unsure why!?I don't have any errors and I have everything the basic example on react routers documentation has. I can't seem to find very much help through a standard google search since most people have not moved over to react router 4 yet it seems like. Everything shows up on the page fine but when I click on the tab the route does not actually change.

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 ? 'Wele user' : 'Login'} />
              </IconMenu>
          }
          >
            <Tabs className={styles.desktopNav}>
              <Tab label="Menu Item 1" ponent={Link} to="/" />
              <Tab label="Menu Item 2" ponent={Link} to="/about" />
              <Tab label={this.state.logged ? 'Wele user' : 'Login'} />
            </Tabs>
          </AppBar>
          <Route exact path="/" ponent={App} />
          <Route path="/about" ponent={About} />
        </div>
      </Router>
    );
  }
}

export default AppBarComponent;

This is my index.js file, its pretty basic nothing special.

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

I am building a react project with material ui and react router 4 but I can't get a basic example working and I am unsure why!?I don't have any errors and I have everything the basic example on react routers documentation has. I can't seem to find very much help through a standard google search since most people have not moved over to react router 4 yet it seems like. Everything shows up on the page fine but when I click on the tab the route does not actually change.

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 ? 'Wele user' : 'Login'} />
              </IconMenu>
          }
          >
            <Tabs className={styles.desktopNav}>
              <Tab label="Menu Item 1" ponent={Link} to="/" />
              <Tab label="Menu Item 2" ponent={Link} to="/about" />
              <Tab label={this.state.logged ? 'Wele user' : 'Login'} />
            </Tabs>
          </AppBar>
          <Route exact path="/" ponent={App} />
          <Route path="/about" ponent={About} />
        </div>
      </Router>
    );
  }
}

export default AppBarComponent;

This is my index.js file, its pretty basic nothing special.

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

• javascript
• reactjs
• react-router
• material-ui

Share Improve this question Follow edited Oct 20, 2017 at 20:28 Jose asked Oct 20, 2017 at 19:54 JoseJose 2,2992323 silver badges2121 bronze badges 4

• Where did you get this syntax from? <Tab label="Menu Item 1" ponent={Link} to="/" /> That doesn't look like anything in their docs? You should actually be using the onActive prop to manually trigger a redirect. The first example in their docs shows how to navigate to a new route. – Chase DeAnda Commented Oct 20, 2017 at 20:10
• I got it from here stackoverflow./questions/37843495/… – Jose Commented Oct 20, 2017 at 20:20
• 1 Are you running the same version of Material-UI that they are? – Chase DeAnda Commented Oct 20, 2017 at 20:42
• Nope.... And that was the problem. I have added an answer with what fixed my issue. – Jose Commented Oct 20, 2017 at 20:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Turns out the stackoverflow question that I was looking at was using a different version of Material UI. I am on "material-ui": "^0.19.1" which is not able to use

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

For my version I needed to use

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

I wish this was mentioned somewhere on the documentation...