문제는 라우터 V4 및 MatchWithFade

Question

이이 질문은이 게시물에 관련이 반응한다.

내가 여기에서 가져온 <MatchWithFade> 예제를 사용하는 방법을 알아 내려고 노력 해요 :

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

제가 보는 문제는 그 나는 두 개의 탭이 있고, 나는 사이에 페이드하려면 그것들은 두 개의 탭 중 하나에서 페이드 효과 만 보았고 어떤 코드가 <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>입니다.

나는 바보 같은 짓을하기를 바라고있다. 그러나 내 인생에서 나는 무엇을 알 수 없다. 모든 지침을 부탁드립니다.

그것의 방법과 객체를 참조하는 방법을 알아낼 수없는 라우터 (반작용 사용하여 jsbin을 만들어하는 방법을 나는 오직 통해 RR을 사용한 이후로는 알아낼 수

UPDATE import 문). 그래서 여기 차선책이다 :이 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; 

하고 반작용 라우터 문서에서 가져온 일이이 문제를 보여주는 완벽한 예입니다. 가장 큰 차이점은 내가 zIndex 참조를 꺼냈다는 것입니다.하지만 동작에는 영향을 미치지 않았습니다.

관련성이있는 경우 create-react-app을 사용하여이 프로젝트를 시작했으며 대응 라우터 버전 4.0.0-alpha.6을 사용하고 있습니다.

Answer 1

이것은 MatchWithFade 예에서 적용하려는 스타일의 문제입니다. willLeave 함수에 zIndex: 1을 다시 추가하십시오. 이렇게하면 나가는 경로가 들어오는 것 위로 오게되어 불투명도가 흐려지는 것을 확인할 수 있습니다.

그런 다음 서로 겹칠 수 있도록 스타일을 적용 할 래퍼 div (website example의 styles.fill)에 절대 위치 지정을 다시 추가하십시오.

Here은 코드가 수정 된 요령입니다.