reactjs - 使用带有 react 的 Material-UI 选项卡

Question

我偶然发现的是了解如何使用 Material-UI 选项卡。我发现了很多帖子，但每个帖子都针对不同版本的 material-UI，并且每个帖子都提供了完全不同的实现方式。

我创建的 Web 应用程序是一个分析仪表板。我在页面上有 3 个部分。

1. 应用栏
2. 主体
3. 页脚

在主体部分，我想要一个标签组件和仪表板组件。选择不同的选项卡将显示不同的仪表板组件。

我从默认的 Tabs 组件开始，它没有正确显示，然后我读到我需要使用 React Router 来做到这一点，但这取决于我使用的路由器版本。

可能是我的 SPA 理解也缺乏，为什么我在使用 Tabs 时应该涉及路由器。

我的设置:最新的 react 16.x最新的 React -router 4.x最新 Material -UI 1.0.3也使用 Redux

Answer 1

这是我使用 Material-ui 中的 App bar 和标签和 react-router 创建的小例子

<BrowserRouter>
 <div className={classes.root}>
  <AppBar position="static" color="default">
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
    >
      <Tab label="Item One" component={Link} to="/one" />
      <Tab label="Item Two" component={Link} to="/two" />
    </Tabs>
  </AppBar>

  <Switch>
    <Route path="/one" component={PageShell(ItemOne)} />
    <Route path="/two" component={PageShell(ItemTwo)} />
  </Switch>
</div>

这里我使用了 Switch 为应用引入路由和 Link 组件触发路由变化

工作示例:https://codesandbox.io/s/04p1v46qww

我已经为示例添加了过渡动画，如果您愿意，可以随意删除动画。

为什么我们使用 react 路由器

这时我们希望添加用户通过路由 url 并找到相关页面例如:/home 将呈现主页和/profile 用于个人资料页面。

使用 react-router，您可以使用许多功能，例如浏览历史记录，这意味着您可以查看之前返回的页面。

传递 url 参数，以便我们可以在参数更改时渲染组件

但是，如果开发人员希望他可以不使用路由来设计和完成应用程序。条件渲染会很困惑，但仍然如此。

从用户的角度来看，它是一个普通的网络应用程序(他不需要知道它是如何设计的:SPA 或其他)，它应该像任何网络应用程序/网站一样工作。这就是路由的作用，同时帮助我们进行更高效的开发。

在不使用路由的情况下将其用于选项卡:https://codesandbox.io/s/qlq1j47l2w

希望对你有帮助