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>



任何帮助都将非常有用。

时间: 原作者:

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



原作者:
...