我正在尝试让 Material-UI 选项卡与路由一起工作，并且当路由正在工作并显示所选选项卡时，在选项卡之间导航的平滑动画不再起作用。如何使用带有 Material-UI 选项卡的 react router 来保持选项卡动画正常工作？
到目前为止，我的 HomeHeader.js 中有选项卡，我正在使用此组件将谷值作为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