Question

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

我创建的Web应用程序是分析仪表板。我在页面上有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的应用栏和标签创建的一个小示例

<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

我为示例添加了过渡动画，如果需要，可以随时删除动画。

为什么我们使用反应路由器

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

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

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

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

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

将此选项卡用于制表符而不使用路由：https://codesandbox.io/s/qlq1j47l2w

希望这对您有帮助

结合使用Material-UI标签和react

1 个答案:

为什么我们使用反应路由器