我喜欢 RR4 和 RM，React Router V4 已经有很好的例子（https://github.com/ReactTraining/react-router/tree/v4/website/examples），但我正在努力理解如何使用新的 V4 API 使用 React Motion 在我的路由器中的不同匹配之间转换，在我的“页面”之间淡入淡出。
我试图了解 Transition 示例如何与 MatchWithFade 一起使用，但我缺少如何将其应用于代表我的页面结构的多个匹配项。
举个例子：给定我的路由器中设置的两条路线，我如何通过带有 TransitionMotion 的 react-motion 处理安装和卸载？
<Router>
<div>
<Match pattern="/products" component={Products} />
<Match pattern="/accessories" component={Accessories} />
</div>
</Router>
任何帮助将不胜感激。
从链接的示例中，我们可以简化。首先，我们创建一个包装器组件，它将替换<Match/>标签并包装它的组件：
import React from 'react'
import { Match } from 'react-router'
import { TransitionMotion, spring } from 'react-motion'
const styles = {}
styles.fill = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
}
const MatchTransition = ({ component: Component, ...rest }) => {
const willLeave = () => ({ zIndex: 1, opacity: spring(0) })
return (
<Match {...rest} children={({ matched, ...props }) => (
<TransitionMotion
willLeave={willLeave}
styles={matched ? [ {
key: props.location.pathname,
style: { opacity: 1 },
data: props
} ] : []}
>
{interpolatedStyles => (
<div>
{interpolatedStyles.map(config => (
<div
key={config.key}
style={{ ...styles.fill, ...config.style }}
>
<Component {...config.data} />
</div>
))}
</div>
)}
</TransitionMotion>
)} />
)
}
export default MatchTransition
然后我们像这样使用它：
<MatchTransition pattern='/here' component={About} />
<MatchTransition pattern='/there' component={Home} />