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



原作者:
...