如何获得Material-UI标签以与react-router一起使用? [英] How do you get Material-UI Tabs to work with react-router?

问题描述

我正在尝试使Material-UI选项卡能够与工艺路线一起使用，并且当工艺路线正在运行并显示所选的选项卡时，在选项卡之间导航的流畅动画不再起作用.如何使用带有Material-UI选项卡的react router来使选项卡动画保持应有的状态?

I am trying to get Material-UI tabs to work with routing, and while the routing is working and displaying the selected tab, the smooth animation of navigating between tabs is no longer working. How can I use react router with Material-UI tabs to keep the tab animations working as they should?

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

As of now, I have the tabs in my HomeHeader.js and I am using this component to pass down the vale as props in order to change the value and thus change the selected tab.

为简单起见，我简化了代码以显示要链接的标签.

For simplicity, I simplified my code to show the tabs I want to be linked.

这是我的代码:

Header.js(带有标签的组件):

Header.js (Component with Tabs):

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组件(将值作为道具传递给HomeHeader.js):

Tab 1 Component (pass value into HomeHeader.js as props):

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

标签2组件(将值作为道具传递给HomeHeader.js):

Tab 2 Component (pass value into HomeHeader.js as props):

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

推荐答案

此处使用路由的方式效率低下.

The way you are using Routes here are inefficient.

应该将Tabs放在一个地方，并且只有一个地方(这样就不必在每个页面中使用HomeHeader):

It should be Tabs are implemented in one place and only one place as this (simply no need to use HomeHeader in every page):

 <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>

如您所见，选项卡在开关渲染组件中询问链接和路线

as you can see tabs are asking for link and routes in the switch render compnents

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

for the animation I used this article: https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

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

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

please find the animation index.css file in demo

我从HOC打包页面以简化路由(PageShell组件)

I wrapped pages from a HOC to make routing easier ( PageShell componet)

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

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

hope this will give you a head start

这篇关于如何获得Material-UI标签以与react-router一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！