トラブルはルータV4とMatchWithFade

Question

この質問はこの記事に関連しているリアクト：

React Router v4 Match transitions using React Motion

を...しかし、私はそれが自身の質問に値すると思いました。

私はここから取った<MatchWithFade>例を使用する方法を把握しようとしている：

https://react-router.now.sh/animated-transitions

私が見ている問題は、私は2つのタブがあり、私は間をフェードする場合それらの2つのタブのうちの1つでフェード効果を見るだけですが、これは自分のコードの最初に表示される<MatchWithFade>に依存します。

関連するコードは次の通りである：この例では

const One =() => { 
    return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'orange'}}> 
     One one one one one one one one one one 
    </div> 
) 
} 

const Two =() => { 
    return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'yellow'}}> 
     Two two two two two two two two two two 
    </div> 
) 
} 

class AppBody extends Component { 

    render() { 

    return (
     <div style={{position: 'relative'}}> 
     <MatchWithFade pattern='/one' component={One} /> 
     <MatchWithFade pattern='/two' component={Two} /> 
     </div> 
    ) 
    } 
} 

、フェードが起こるようになります（ルータ<Link>成分を反応させる使用して）、/oneに移動、私は/twoに移動した場合、ありますフェードすることはありません。その後、私が<MatchWithFade pattern='/two' ... />を最初にリストすると、/twoにフェード遷移がありますが、/oneにはなりません。

ちょうど<Match>を使用するとうまくいきますので、私は<BrowserRouter>がどのように設定されているかという根本的な問題ではないと思います。

私はちょうど何かばかげていると思っていますが、私の人生にとって何が分かりませんか？どんな指導も高く評価されます。

UPDATE

私は、ルータに反応使っjsbinを作っする方法を見つけ出すことができなかった私は今までRR経由を使用しましたので、（、それのメ​​ソッドやオブジェクトを参照する方法を見つけ出すことができませんでしたインポートステートメント）。そこでここでは次善の策です：このMatchWithFade間の唯一の非常にわずかな違いがあります

import React, { Component } from 'react'; 
import BrowserRouter from 'react-router/BrowserRouter' 

import { TransitionMotion, spring } from 'react-motion' 
import Match from 'react-router/Match' 

import Link from 'react-router/Link'; 

const MatchWithFade = ({ component:Component, ...rest }) => { 
    const willLeave =() => ({ opacity: spring(0) }) 

    return (
    <Match {...rest} children={({ matched, ...props }) => { 
     return (
     <TransitionMotion 
      willLeave={willLeave} 
      styles={matched ? [ { 
      key: props.location.pathname, 
      style: { opacity: 1 }, 
      data: props 
      } ] : []} 
     > 
      {interpolatedStyles => { 
      return (
       <div> 
       {interpolatedStyles.map(config => (
        <div 
        key={config.key} 
        style={{...config.style }} 
        > 
        <Component {...config.data}/> 
        </div> 
       ))} 
       </div> 
      ) 
      }} 
     </TransitionMotion> 
    ) 
    }}/> 
) 
} 

const One =() => { 
    return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'orange', minHeight: 200}}> 
     One one one one one one one one one one<br /> 
     One one one one one one one one one one<br /> 
    </div> 
) 
} 

const Two =() => { 
    return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}> 
     Two two two two two two two two two two<br /> 
     Two two two two two two two two two two<br /> 
    </div> 
) 
} 


class App extends Component { 

    render() { 
    return (
     <BrowserRouter> 
      <div style={{padding: 12}}> 
      <div style={{marginBottom: 12}}> 
       <Link to='/one'>One</Link> || <Link to='/two'>Two</Link> 
      </div> 
      <div style={{position: 'relative'}}> 
       <MatchWithFade pattern='/one' component={One} /> 
       <MatchWithFade pattern='/two' component={Two} /> 
      </div> 
      </div> 
     </BrowserRouter> 
    ) 
    } 
} 

export default App; 

、して反応ルータのドキュメントから取り出した1：これは、この問題を示して完全な例です。最大の違いは、私がzIndex参照を取り出したことですが、動作には影響しませんでした。

関連性がある場合は、create-react-appを使用してこのプロジェクトを開始しましたが、リアクタのバージョン4.0.0-alpha.6を使用しています。

Answer 1

これは、MatchWithFadeの例から適用する（またはしない）スタイルの問題です。 zIndex: 1をwillLeaveファンクションに追加すると、不透明度が低下するのを確認するために、発信ルートが着信ルートの上に確実に配置されます。

次に、重なり合うようにスタイルを適用するラッパーdiv（website exampleのstyles.fill）に絶対位置を戻します。

Hereは、コードを修正した要点です。