javascript - 你如何让 Material-UI 选项卡与 react-router 一起工作？

Question

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

截至目前，我的 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)

选项卡 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

Answer 1

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

应该是 Tabs 实现在一个地方，并且只在一个地方这样(根本不需要在每个页面都使用 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

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

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

我包装了来自 HOC 的页面以简化路由(PageShell 组件)

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

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