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}/>
原作者:
...