如何让Material UI选项卡与react router一起工作

Question

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

到目前为止，我在HomeHeader.js中有选项卡，我正在使用这个组件将vale作为道具向下传递，以便更改值，从而更改所选选项卡。

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

这是我的代码：

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

选项卡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的方式效率很低。

它应该是选项卡在一个地方实现，而且只有一个地方这样(根本不需要在每个页面中使用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

这里他们使用反应插件css转换组

请在演示中找到动画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>
</>
);
}

Answer 3

对于上面的当前结构，您可以看到"选项卡"随着路由的更改而重新呈现。

react的方式是由包含组件的组件构建的，因此如果更改一个组件，它的所有子组件都将被渲染。

因此，在您的情况下，这就是组件的结构：

MainApp >
Route('monitor') > MonitorProductPage > HomeHeader
Route('sensor') > SensorProductPage > HomeHeader

在本例中，您可以看到，在更改路由时，您将更改所有内容，并需要重新呈现一个新的HomeHeader。

通过这种方式，我将对其进行结构化，以确保HomeHeader将被创建一次，并且只有道具会更改。(针对性能和此处的问题(是这样的：

MainApp >
Route('innerpage/*') > InnerPage > 
> MonitorProductPage
> SensorProductPage

像react路由器dom中的这段代码https://reacttraining.com/react-router/web/example/route-config

这意味着你有一个单一的路由来捕获那些内部页面，它可以像上面一样，也可以捕获所有(*(然后，您将在InnerPage中有另一个路由器，它将决定显示哪个页面。

const routes = [
{
path: "/innerpage",
component: InnerPage
},
{
path: "/monitor",
component: MonitorProductPage,
},
{
path: "/sensor",
component: SensorProductPage
}
];

组件"InnerPage"将呈现HomeHeader，并且在其内部将有路由器来决定其"主体">