reactjs - reactjs响应路由器v4使用响应动作匹配转换

  显示原文与译文双语对照的内容
136 4

现在已经开始在路由器中使用 React/( https://github.com/ReactTraining/react-router/tree/v4/website/examples ),但是我正在努力理解如何使用新的V4 API在我的路由器之间进行响应。

我试图了解转换示例如何与MatchWithFade一起工作,但是我缺乏如何使用它来表示页结构。

例如:由于路由器中的两个路由设置,如何使用TransitionMotion的响应运动来处理安装和卸载。

<Router>
 <div>
 <Match pattern="/products" component={Products}/>
 <Match pattern="/accessories" component={Accessories}/>
 </div>
</Router>

任何帮助都将非常有用。

时间:原作者:0个回答

87 4

从链接的例子中我们可以简化。首先我们创建一个包装组件,它将替换 <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}/>
原作者:
...