React Router v4 使用 React Motion 匹配转换 [英] React Router v4 Match transitions using React Motion

问题描述

我喜欢 RR4 和 RM，React Router V4 已经有很好的例子(https://github.com/ReactTraining/react-router/tree/v4/website/examples) 但我很难理解如何使用新的 V4 API 在不同的比赛之间进行转换在我的带有 React Motion 的路由器中，在我的页面"之间淡入淡出.

我试图了解 Transition 示例如何与 MatchWithFade 配合使用，但我不知道如何将其应用于代表我的页面结构的多个匹配项.

举个例子:给定我的路由器中设置了两条路线，我如何通过带有 TransitionMotion 的 react-motion 处理安装和卸载?

<路由器><div><Match pattern="/products" component={Products}/><Match pattern="/accessories" component={Accessories}/>

</路由器>

任何帮助将不胜感激.

解决方案

从链接的例子中我们可以简化.首先，我们创建一个包装组件，它将替换 <Match/> 标签并包装它的组件:

从 'react' 导入 React从反应路由器"导入{匹配}从反应运动"导入 { TransitionMotion, spring }const 样式 = {}样式.fill = {位置:'绝对'，左:0，右:0，顶部:0，底部:0}const MatchTransition = ({ component: Component, ...rest }) =>{const willLeave = () =>({ zIndex: 1, 不透明度: spring(0) })返回 (<Match {...rest} children={({matched, ...props }) =>(<过渡运动willLeave={willLeave}样式={匹配?[ {关键:props.location.pathname，样式:{不透明度:1}，数据:道具} ] : []}>{interpolatedStyles =>(<div>{interpolatedStyles.map(config => (
))}

)}</TransitionMotion>)}/>)}导出默认 MatchTransition

然后我们像这样使用它:

<MatchTransition pattern='/there' component={Home}/>

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 understand how I can use the new V4 API to transition between different Matches in my Router with React Motion, fading in and out between my 'pages'.

I've tried to understand how the Transition example works with the MatchWithFade but I'm missing how to take this and apply it to multiple matches representing my page structure.

As an example: given two routes setup in my Router how can I have the mounting and unmounting handled by react-motion with TransitionMotion?

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

Any help would be greatly appreciated.

解决方案

From the linked example we can simplify. First we create a wrapper component that will replace the <Match/> 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 (
    <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

Then we use it like this:

<MatchTransition pattern='/here' component={About} />
<MatchTransition pattern='/there' component={Home} />

这篇关于React Router v4 使用 React Motion 匹配转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！