对于带有 Typescript 的 Material UI 1.0：请参阅下面@ogglas 的这篇文章。

对于带有纯 JS 的 Material-UI 1.0：

<Tabs value={value} onChange={this.handleChange}>
  {
    this.props.tabs.map(
      ({label, path})=><Tab key={label} 
                            label={label} 
                            className={classes.tabLink} 
                            component={Link} 
                            to={path} />
    )
  }
</Tabs>

并classes.tabLink定义为：

tabLink : {
    display:"flex",
    alignItems:"center",
    justifyContent:"center"
}

这是如何工作的？

所有继承自 的 mui 1.0 组件都ButtonBase支持一个componentprop，参见ButtonBase。这个想法是允许您控制组件呈现为它的包装器/根元素的内容。Tab也具有此功能，尽管在撰写此答案时，该props并未明确记录，但由于Tab继承自ButtonBase，其所有props都会保留（并且文档确实涵盖了这一点）。

的另一个特点ButtonBase是所有额外的props，不是由ButtonBase组件使用或继承的，都分布在指定的component. 我们已经使用此行为通过将其交给控制来发送所to使用的props。您可以以相同的方式发送任何其他props。请注意，这对于和都有明确记录。LinkTabButtonBaseTab

感谢@josh-l 要求添加此内容。

您现在可以这样做：

<Tabs onChange={this.changeTab} value={value}>
   <Tab value={0} label="first" containerElement={<Link to="/first"/>} />
   <Tab value={1} label="second" containerElement={<Link to="/second"/>}/>
   <Tab value={2} label="third" containerElement={<Link to="/third"/>} />
 </Tabs>

你可以试试这个简单的方法

 <Tab label='Most popular ideas'  to='/myPath' component={Link} />

这是使用<Link />from material-ui 而不是直接使用<Link />or <NavLink />from react-router 来解决的。可以在此处的文档中找到相同的示例。

https://material-ui.com/components/links/

还<Button />标记有分量的props来实现这一目标

<Button color="inherit" component={Link} to={"/logout"}>Logout</Button>

可以在此处找到对此的广泛讨论

https://github.com/mui-org/material-ui/issues/850

由于我们使用的是 TypeScript，因此我无法使用 @hazardous 解决方案。这就是我们为material-ui v1.0.0-beta.16和实现路由的方式react-router 4.2.0。我们拆分的原因this.props.history.location.pathname是因为我们需要访问/renewals/123例如。如果我们不这样做，我们将收到以下警告，并且不会将任何选项卡显示为活动状态：Warning: Material-UI: the value provided '/renewals/123' is invalid

带导入的完整代码：

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as PropTypes from "prop-types";
import { Switch, Route, Redirect, Link  } from "react-router-dom";
import { Cases } from './../Cases';
import { SidePane } from './../SidePane';
import { withStyles, WithStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Tabs, { Tab } from 'material-ui/Tabs';
import { withRouter } from "react-router-dom";
import Badge from 'material-ui/Badge';
import Grid from 'material-ui/Grid';
import { Theme } from 'material-ui/styles';
import SimpleLineIcons from '../../Shared/SimpleLineIcons'

interface IState {
    userName: string;
}

interface IProps {
    history?: any
}

const styles = (theme: Theme) => ({
    root: theme.typography.display1,
    badge: {
        right: '-28px',
        color: theme.palette.common.white,
    },
    imageStyle:{
        float: 'left',
        height: '40px',
        paddingTop: '10px'
    },
    myAccount: {
        float: 'right'
    },
    topMenuAccount: {
        marginLeft: '0.5em',
        cursor: 'pointer'
    }
});

type WithStyleProps = 'root' | 'badge' | 'imageStyle' | 'myAccount' | 'topMenuAccount';

class Menu extends React.Component<IProps & WithStyles<WithStyleProps>, IState> {
    constructor(props: IProps & WithStyles<WithStyleProps>) {
        super(props);
        this.state = {
            userName: localStorage.userName ? 'userName ' + localStorage.userName : ""
        }
    }
    componentDidMount() {
        this.setState({ userName: localStorage.userName ? localStorage.userName : "" })
    }
    logout(event: any) {
        localStorage.removeItem('token');
        window.location.href = "/"
    }

    handleChange = (event: any, value: any) => {
        this.props.history.push(value);
    };

    render() {
        const classes = this.props.classes;
        let route = '/' + this.props.history.location.pathname.split('/')[1];
        return (
            <div>
                <Grid container spacing={24}>
                    <Grid item xs={12} className={classes.root}>
                        <img src="/Features/Client/Menu/logo.png" alt="Logo" className={classes.imageStyle} />
                        <div className={this.props.classes.myAccount}>
                        <span><span className={this.props.classes.topMenuAccount}>MY ACCOUNT</span><span className={classes.topMenuAccount}><SimpleLineIcons iconName={'user'} />&#x25BE;</span></span>
                            <span onClick={this.logout} className={classes.topMenuAccount}><SimpleLineIcons iconName={'logout'} /></span>
                        </div>
                    </Grid>
                    <Grid item xs={12} >
                        <div className="route-list">
                            <Tabs
                                value={route}
                                onChange={this.handleChange}
                                indicatorColor="primary"
                                textColor="primary"
                            >
                                <Tab label="Overview" value="/" />
                                <Tab label={<Badge classes={{ badge: classes.badge }} badgeContent={this.props.caseRenewalCount} color="primary">
                                    Renewals
                                   </Badge>} value="/renewals" />
                            </Tabs>
                        </div>
                    </Grid>
                </Grid>
            </div>
        );
    }
}
export default withStyles(styles)(withRouter(Menu))