Question

我需要用反应路由器Tab组件包装Link组件。但是考虑以下代码，单击选项卡不会产生任何结果。如果这意味着Tabs组件必须是所有Tab组件的直接父级，那么我该如何应用Link组件？

      <Tabs
        value={tab}
        onChange={(e, v) => setTab(v)} 
      >
        <Link to={`${props.match.url}`}>
          <Tab label="Content" />
        </Link>
        <Link to={`${props.match.url}/comment`}>
          <Tab label="Comment" /
        </Link>
        <Link to={`${props.match.url}/create`}>
          <Tab label="Create" />
        </Link>
      </Tabs>

Answer 1

您可以为Tab提供 component 道具：

  <Tabs
    value={tab}
    onChange={(e, v) => setTab(v)} 
  >
      <Tab component={Link} to={`${props.match.url}`} label="Content" />
      <Tab component={Link} to={`${props.match.url}/comment`} label="Comment" />
      <Tab component={Link} to={`${props.match.url}/create`} label="Create" />
  </Tabs>

material-ui包装带有链接的Tab组件

1 个答案: