Material-UI, changing URL when clicking on a Tab

material-ui-tab-links.jsx

import React, { Component } from 'react';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Tabs, { Tab } from 'material-ui/Tabs';
import Paper from 'material-ui/Paper';



const TabStylesheet = createStyleSheet(theme => ({
	root: {
	  backgroundColor: theme.palette.background.paper,
	  flexGrow: 1,
	  width: '100%',
	},
}));



class TabNav extends Component {

	state = {
		index : null,
	}

	handleChange = (event, index) => {
		this.setState({ index });
	};

	onTabClick = tab => this.props.history.push(tab.path);

	render(){

		const classes = this.props.classes;

		const items = this.props.items.map( (item, index ) => {
			item.index = index;
			if ( this.props.history && this.props.history.location.pathname === item.path) {
				item.current = true;
			}
			return item;
		});

		const currentItem = items.filter( item => item.current )[0];
		
		const currentIndex = currentItem ? currentItem.index : 0;
	
		// Build tab items list.
		const tabItems = items.map( item => 
			<Tab 
				key={item.id} 
				label={item.title} 
				onClick={this.onTabClick.bind(this,item)} />
		)
	
		if ( items.length > 0 ) {
			return(
				<Paper className={classes.root}>
					<Tabs 
						index={this.state.index ? this.state.index : currentIndex }
						onChange={this.handleChange}
						indicatorColor="primary"
						textColor="primary"
						scrollable
						scrollButtons="auto"
						centered
					>
						{tabItems}
					</Tabs>
				</Paper>
			)
		}
		else {
			return(
				null
			)
		}

	}


}



const Navigation = withStyles(TabStylesheet)(TabNav);

export {Navigation};