リアクタ・ルータv4リアクション・モーションを使用したマッチ・トランジション

Question

リア・ルータV4（https://github.com/ReactTraining/react-router/tree/v4/website/examples）の素晴らしい例はすでにありますが、新しいV4 APIを使ってさまざまなマッチ間でどのように移行できるか分かりません。 React Motionを搭載した私のルータでは、私の「ページ」の間でフェードインとフェードアウトします。

私は、遷移の例がMatchWithFadeでどのように機能するのか理解しようとしましたが、これを受け取り、ページ構造を表す複数の一致に適用する方法がありません。

例：ルータに2つのルートが設定されています。どのようにして、TransitionMotionとの反応動作によってマウントおよびアンマウントを処理できますか？

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

ご協力いただければ幸いです。

Answer 1

リンクされた例からわかりやすくすることができます。まず、<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} />