我偶然发现的是了解如何使用 Material-UI 选项卡。我找到了很多帖子，但每个帖子都针对不同版本的 Material-UI，并且每个帖子都给出了完全不同的实现方式。
我创建的 Web 应用程序是一个分析仪表板。我在页面上有 3 个部分。
在主体部分，我想要一个选项卡组件和仪表板组件。选择不同的选项卡将显示不同的仪表板组件。
我从默认的 Tabs 组件开始，它没有正确显示，然后我读到我需要使用 React Router 来完成它，但这取决于我使用的路由器版本。
可能是我的 SPA 理解也缺乏为什么我在使用 Tabs 时应该涉及路由器。
我的设置：最新的 React 16.x 最新的 React -router 4.x 最新的 Material-UI 1.0.3 也使用 Redux
这是我使用来自 Material-ui 的 App bar 和 tabs 和 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
我为示例添加了过渡动画，如果您愿意，可以随意删除动画。
那是我们希望添加用户通过路由 url 并找到相关页面的时候，例如：/home 将呈现主页和 /profile 为个人资料页面。
使用 react-router，您可以使用许多功能，例如浏览历史记录，这意味着您可以查看之前返回的页面。
传递 url 参数，以便我们可以在参数更改时呈现组件
但是，如果开发人员希望他可以在不使用路由的情况下设计和完成应用程序。条件渲染会一团糟，但仍然如此。
从用户的角度来看，它是一个普通的网络应用程序（他不需要知道它是如何设计的：SPA 或其他），它应该像任何网络应用程序/网站一样工作。这就是路由同时帮助我们进行更高效开发的作用。
将此用于选项卡而不使用路由：https : //codesandbox.io/s/qlq1j47l2w
希望能帮到你