结合使用Material-UI标签和react

Question

我偶然发现的一点是了解如何使用Material-UI选项卡。 我发现了很多文章，但每个文章针对的是材料UI的不同版本，并且给出了完全不同的实现方式。

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

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

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

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

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

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

Answer 1

这是我使用Material-ui和react-router的App栏和标签创建的一个小示例

<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 Router

那是我们希望添加用户浏览路线URL并找到相关页面的时候，例如：/ home将呈现主页，而/ profile将显示个人资料页面。

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

传递url参数，以便我们可以在参数变化时呈现组件

但是，如果开发人员希望他可以设计和完成应用程序而无需使用路由 。 有条件的渲染将是一团糟，但仍然如此。

从用户的角度来看，它是一个常规的Web应用程序（他不需要知道其设计方式：SPA还是其他方式），并且应该可以像任何Web应用程序/网站一样工作。 这就是路由同时帮助我们进行更有效的开发的方式。

使用此选项卡不使用路由即可： https : //codesandbox.io/s/qlq1j47l2w

希望这个能对您有所帮助