Проблема с React Router v4 и MatchWithFade

Question

Этот вопрос связан с этим постом:

React Router v4 Совпадение переходов с использованием React Motion

... но я думал, что это заслуживает отдельного вопроса.

Я пытаюсь понять, как использовать <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>
    )
  }
}

В этом примере переход к /one, (используя React Router <Link> компонент) приведет к исчезновению, но если я перейду к /twoнет исчезать. Тогда, если я перечислю <MatchWithFade pattern='/two' ... /> сначала я вижу постепенный переход к /two, но нет /one,

Просто используя <Match> работает нормально, так что я не думаю, что это фундаментальная проблема с тем, как у меня <BrowserRouter> сконфигурировано.

Я надеюсь, что просто делаю что-то глупое, но ради жизни я не могу понять, что. Любое руководство приветствуется.

ОБНОВИТЬ

Я не мог понять, как создать jsbin, используя React Router (не мог понять, как ссылаться на методы и объекты на нем, поскольку я когда-либо использовал RR только через операторы импорта). Итак, вот следующая лучшая вещь: это полный пример, который демонстрирует эту проблему:

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;

Есть только очень незначительные различия между этим MatchWithFadeи тот, который взят из документов React Router. Самая большая разница в том, что я вытащил zIndex ссылка, но это не повлияло на поведение.

Если это актуально, я начал этот проект, используя create-react-appи я использую версию React Router 4.0.0-alpha.6,

Answer 1

Это проблема стиля, который вы применяете (или нет) из MatchWithFade пример. добавлять zIndex: 1 вернуться к вашему willLeave функция, так как это гарантирует, что исходящий маршрут будет поверх входящего, чтобы увидеть, что непрозрачность исчезла.

Затем добавьте абсолютное позиционирование обратно в div-обертку, к которой вы применяете стиль (styles.fill в примере с веб-сайтом), чтобы они могли перекрывать друг друга.

Вот суть вашего исправленного кода.