这个问题是对此的后续跟进:
Trouble with React Router v4 and MatchWithFade
我有另一个(可能是愚蠢的)关于使用MatchWithFade
和React Router v4的问题。我想要做的是拥有嵌套路由,因此顶级组件可能具有此功能:
<MatchWithFade pattern='/one' component={One} />
...然后One
可能有这个:
<Match pattern='/one/one' Component={OneOne} />
这并不会让我觉得这是一种不同寻常的模式(尽管可能是这样)。在任何情况下,我观察到的行为是,使用上面的示例,如果我加载OneOne
,它将被挂载,然后立即调用componentWillUnmount
。如果我猜测,我会说TransitionMotion
跟踪OneOne
的(可能是隐藏的)实例,一旦转换完成,它就会卸载隐藏的组件。就基本UI而言,呈现OneOne
。但是,如果componentWillUnmount
进行任何清理(例如,从Redux中移除某些内容),那么当然会触发该操作,并且与OneOne
绑定的任何数据都会被吹走。
这是一个说明问题的完整示例:
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 styles = {
fill: { position: 'absolute', top: 0, left: 0 }
};
const MatchWithFade = ({ component:Component, ...rest }) => {
const willLeave = () => ({ zIndex: 1, 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={{...styles.fill, ...config.style }}>
<Component {...config.data}/>
</div>
))}
</div>
)
}}
</TransitionMotion>
)
}}/>
)
}
const TwoOne = () => {
return (
<div>Two One</div>
)
}
class TwoTwo extends Component {
componentWillUnmount() {
console.log("TwoTwo will unmount")
}
render () {
return (
<div>Two Two</div>
)
}
}
const TwoHome = () => {
return (
<div>Two Home</div>
)
}
class One extends Component {
componentWillUnmount () {
console.log("ONE UNMOUNTING")
}
render () {
return (
<div style={{ 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={{ width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}>
<Match pattern='/two/one' component={TwoOne} />
<Match pattern='/two/two' component={TwoTwo} />
<Match pattern='/two(/)?' exactly={true} component={TwoHome} />
</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>
|| <Link to='/two/one'>Two One</Link>
|| <Link to='/two/two'>Two Two</Link>
</div>
<div style={{position: 'relative'}}>
<MatchWithFade pattern='/one' component={One} />
<MatchWithFade pattern='/two' component={Two} />
</div>
</div>
</BrowserRouter>
)
}
}
export default App;
如果您加载并打开控制台,请在One
和Two
链接之间切换。您会在用户界面中看到交叉淡入淡出,并且您将看到&#34; ONE UNMOUNTING&#34;在从一到二的转换完成时在控制台中。这是对的。
现在,点击Two One
和Two Two
。在这种情况下,当点击Two One
时,您会立即看到&#34; TwoTwo将卸载&#34;在控制台,这是好的。但是,如果您点击Two Two
,则会看到&#34; TwoTwo将卸载&#34;大约一秒后 - 我认为是父MatchWithFade
执行的时间。
所以我不确定这里发生了什么。我的代码刚被破坏了吗?我在做一些RRv4无法支持的事情吗?我发现了一个错误吗?
感谢任何帮助/指导!
答案 0 :(得分:1)
您的问题是您使用props.location.pathname
作为密钥。对于组件,它应始终相同,但是您编写它的方式,每次导航时它都会更改。尝试更改此内容:
const styles = {
fill: { position: 'absolute', top: 0, left: 0 }
};
为:
const styles = {
fill: { position: 'relative', top: 0, left: 0 }
};
您将看到您正在呈现<Two>
的两个实例(每个键一个)。
如果您使用常量key
,例如rest.pattern
(与此<Match>
相关联的模式),您的问题就会消失。
styles={matched ? [ {
key: rest.pattern,
style: { opacity: 1 },
data: props
} ] : []}