React Router v4 Match transitions using React Motion

Question

I\'m loving RR4 and RM, there\'s already great examples for React Router V4 (https://github.com/ReactTraining/react-router/tree/v4/website/examples) but i\'m struggling to u

Answer 1

From the linked example we can simplify. First we create a wrapper component that will replace the tag and wrap it's component:

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 (
     (
      
        {interpolatedStyles => (
          

            {interpolatedStyles.map(config => (
              

                
              
            ))}
          
        )}
      
    )} />
  )
}

export default MatchTransition

Then we use it like this: