如何让 Material-UI 选项卡与 React-router 一起使用？

我正在尝试让 Material-UI 选项卡与路由一起使用，当路由正在工作并显示所选选项卡时，选项卡之间导航的流畅动画不再起作用。如何将 React Router 与 Material-UI 选项卡一起使用，以保持选项卡动画正常工作？

截至目前，我的 HomeHeader.js 中有选项卡，并且我正在使用此组件将 vale 作为 props 传递下去，以便更改值，从而更改所选选项卡。

为了简单起见，我简化了代码以显示我想要链接的选项卡。

这是我的代码：

header.js（带选项卡的组件）：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'

class HomeHeader extends Component {

  state = {
    value: false
  };

  handleChange = (event, value) => {
    this.setState({ value })
  };

  render() {
    const { classes, value } = this.props

    return (
        <AppBar className={classes.appBar} elevation={this.props.elevation}>
          <Hidden smDown>
            <Grid container justify="space-between" alignItems="center">
              <Tabs value={value} onChange={this.handleChange}>
                <Tab label="monitor" component={Link} to="/monitor" />
                <Tab label="sensor" component={Link} to="/sensor" />
              </Tabs>
            </Grid>
          </Hidden>
        </AppBar>
    )
  }
}

export default withStyles(styles)(HomeHeader)

Tab 1 组件（将值作为 props 传递到 HomeHeader.js）：

import React from 'react'

import HomeHeader from '../components/HomeHeader'

class SensorProductPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

  render() {
    return (
      <div>
        <HomeHeader value={1} />
        <div> Hello </div>
      </div>
    );
  }
}

export default SensorProductPage

Tab 2 组件（将值作为 props 传递到 HomeHeader.js）：

import React from 'react'

import HomeHeader from '../components/HomeHeader'

class MonitorProductPage extends React.PureComponent {

  render() {
    return (
      <div>
        <HomeHeader value={0} />
        <div> Hello </div>
      </div>
    );
  }
}

export default MonitorProductPage

您在这里使用路由的方式效率很低。

应该是选项卡在一个地方实现，并且只在一个地方实现，如下所示（根本不需要在每个页面中使用 HomeHeader）：

 <BrowserRouter>
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          fullWidth
        >
          <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>
  </BrowserRouter>

如您所见，选项卡要求切换渲染组件中的链接和路由

对于我使用这篇文章的动画：https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964 https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

他们在这里使用React-addons-css-transition-group

请在demo中找到动画index.css文件

我包装了如何使路由更容易的页面（appShell 组件）

这是一个工作示例：https://codesandbox.io/s/04p1v46qww https://codesandbox.io/s/04p1v46qww

希望这会给你一个良好的开端