你如何让 Material-UI Tabs 与 react-router 一起工作？

Question

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

到目前为止，我的 HomeHeader.js 中有选项卡，我正在使用此组件将谷值作为道具传递以更改值，从而更改选定的选项卡。

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

这是我的代码：

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 组件（将值作为道具传递给 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

您在此处使用 Routes 的方式效率低下。

应该是 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

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

我从 HOC 中包装了页面以使路由更容易（PageShell 组件）

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

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

Answer 2

要跟踪活动选项卡，您可以使用位置作为选项卡值。并使用路由器位置作为选项卡组件的值。通过这种方式，您可以在直接加载页面时实现开箱即用的更改选项卡动画并突出显示活动选项卡。

export const Module: React.FC<IModuleProps> = props => {
    const match = useRouteMatch();
    const location = useLocation();

    return (
        <>
            <Tabs value={location.pathname} >
                <Tab label="Dashboard" component={Link} to={`${match.url}/dashboard`} value={`${match.url}/dashboard`} />
                <Tab label="Audit Results" component={Link} to={`${match.url}/audit-results`} value={`${match.url}/audit-results`} />
            </Tabs>
            <Switch>
                <Route path={`${match.url}/dashboard`}>
                    <Dashboard />
                </Route>
                <Route path={`${match.url}/audit-results`}>
                    <AuditResults />
                </Route>
                <Route path={`${match.url}`}>
                    <Dashboard />
                </Route>
            </Switch>
        </>
    );
}