javascript - Material-ui 从 react-router 添加 Link 组件

Question

我正在努力添加 <Link/>我的 material-ui AppBar 的组件

这是我的导航类:

class Navigation extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    var styles = {
      appBar: {
        flexWrap: 'wrap'
      },
      tabs: {
        width: '100%'
      }
    }

    return (
      <AppBar showMenuIconButton={false} style={styles.appBar}>
        <Tabs style={styles.tabs}>
          <Tab label='Most popular ideas'/>
          <Tab label='Latest ideas' />
          <Tab label='My ideas' />
        </Tabs>
      </AppBar>
    )
  }
}

看起来不错:

标签是可点击的，有流畅的动画，这很酷。但是我如何将它们与 react-router 连接在一起？及其'<Link/>组件？

我试过添加 onChange这样的听众:

<Tab
  label='My ideas'
  onChange={<Link to='/myPath'></Link>}
/>

但是我收到以下错误:

Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object

如果我尝试包装 <Tab/>组件进入 <Link/>组件，我收到错误 <Tabs/>组件只接受 <Tab/>组件。

这也不起作用(没有产生错误，但单击 Tab 不会将我带到路径):

<Tab label='Most popular ideas'>
  <Link to='/popular'/>
</Tab>

我如何制作 <Link/>组件与 <Tabs> 一起工作和 <AppBar> ？如果那不可能，我可以使用 material-ui 中的任何其他组件库以形成适当的菜单。

Answer 1

对于带有 Typescript 的 Material UI 1.0:请参阅 this post由下面的@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"
}

这是如何运作的？

所有继承自 ButtonBase 的 mui 1.0 组件，支持 component 属性，参见 ButtonBase .这个想法是允许您控制组件呈现为它的包装器/根元素的内容。 Tab 也有这个特性，虽然在写这个答案的时候这个 prop 没有明确记录，但是 Tab 继承自 ButtonBase ，它的所有 props 都会继承(并且文档确实涵盖了这一点)。

ButtonBase 的另一个特点是，所有未被 ButtonBase 或继承的组件使用的额外属性都分布在指定的 组件 上.我们已使用此行为将 Link 使用的 to Prop 发送给 Tab 控件。你可以用同样的方式发送任何额外的 Prop 。请注意，这对 ButtonBase 和 Tab 都有明确的记录。

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