{"action":"created","issue":{"url":"https://api.github.com/repos/chenglou/react-motion/issues/415","repository_url":"https://api.github.com/repos/chenglou/react-motion","labels_url":"https://api.github.com/repos/chenglou/react-motion/issues/415/labels{/name}","comments_url":"https://api.github.com/repos/chenglou/react-motion/issues/415/comments","events_url":"https://api.github.com/repos/chenglou/react-motion/issues/415/events","html_url":"https://github.com/chenglou/react-motion/issues/415","id":198182396,"number":415,"title":"Issue with TransitionMotion and React Router v4 nested routes","user":{"login":"bmueller-sykes","id":12236379,"avatar_url":"https://avatars.githubusercontent.com/u/12236379?v=3","gravatar_id":"","url":"https://api.github.com/users/bmueller-sykes","html_url":"https://github.com/bmueller-sykes","followers_url":"https://api.github.com/users/bmueller-sykes/followers","following_url":"https://api.github.com/users/bmueller-sykes/following{/other_user}","gists_url":"https://api.github.com/users/bmueller-sykes/gists{/gist_id}","starred_url":"https://api.github.com/users/bmueller-sykes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bmueller-sykes/subscriptions","organizations_url":"https://api.github.com/users/bmueller-sykes/orgs","repos_url":"https://api.github.com/users/bmueller-sykes/repos","events_url":"https://api.github.com/users/bmueller-sykes/events{/privacy}","received_events_url":"https://api.github.com/users/bmueller-sykes/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-12-30T18:55:55Z","updated_at":"2017-01-16T15:04:16Z","closed_at":null,"body":"Hi,\r\n\r\nI'm experimenting with animated transitions in React Router v4, specifically this:\r\n\r\nhttps://react-router.now.sh/animated-transitions\r\n\r\n...and I've run into a bizarre issue that I can't figure out. I've written a Stack Overflow question covering the issue, complete with code example, here:\r\n\r\nhttp://stackoverflow.com/questions/41388263/nested-match-routes-with-react-router-v4-and-matchwithfade\r\n\r\nProbably makes sense to hop over there to read the whole post, though I'll post the complete code example below. Anyway, one of the nice features of RRv4 is that you can put your `<Match />` components anywhere in your code. So, you might have a route `/one` that invokes the `<One />` component. Then you might have routes `/one/one` and `/one/two`, both of which have `<Match />` components within `<One />`. This seems like the pattern RRv4 wants you to follow, and it makes reasonable sense to me.\r\n\r\nSo using this pattern, I tried using their `<MatchWithFade/>` example from the above URL, and I ran into a very weird problem. In short, child `<Match />` components of `<MatchWithFade />` components are mounted, and then an apparently invisible instance of them is immediately unmounted. Visually, the child component is not unmounted, but if any actions are called on `componentWillUnmount()`, such as clearing out a Redux node, then obviously the UI will reflect that change.\r\n\r\nSo I guess the question is this: does this mean there's something fundamentally broken in `<TransitionMotion />`, or does this mean that the `<MatchWithFade />` pattern is fundamentally incompatible with nested route handling (if that makes sense)?\r\n\r\nHere's the full code example. You can see the problem by toggling back and forth between the \"Two One\" and \"Two Two\" links.\r\n\r\nThanks!\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport BrowserRouter from 'react-router/BrowserRouter'\r\n\r\nimport { TransitionMotion, spring } from 'react-motion'\r\nimport Match from 'react-router/Match'\r\nimport Link from 'react-router/Link';\r\n\r\nconst styles = {\r\n  fill: { position: 'absolute', top: 0, left: 0 }\r\n};\r\n\r\nconst MatchWithFade = ({ component:Component, ...rest }) => {\r\n  const willLeave = () => ({ zIndex: 1, opacity: spring(0) })\r\n\r\n  return (\r\n    <Match {...rest} children={({ matched, ...props }) => {\r\n      return (\r\n        <TransitionMotion\r\n          willLeave={willLeave}\r\n          styles={matched ? [ {\r\n            key: props.location.pathname,\r\n            style: { opacity: 1 },\r\n            data: props\r\n          } ] : []}\r\n        >\r\n          {interpolatedStyles => {\r\n            return (\r\n              <div>\r\n                {interpolatedStyles.map(config => (\r\n                  <div\r\n                    key={config.key}\r\n                    style={{...styles.fill, ...config.style }}>\r\n                    <Component {...config.data}/>\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            )\r\n          }}\r\n        </TransitionMotion>\r\n      )\r\n    }}/>\r\n  )\r\n}\r\n\r\nconst TwoOne = () => {\r\n  return (\r\n    <div>Two One</div>\r\n  )\r\n}\r\n\r\n\r\nclass TwoTwo extends Component {\r\n  componentWillUnmount() {\r\n    console.log(\"TwoTwo will unmount\")\r\n  }\r\n\r\n  render () {\r\n    return (\r\n      <div>Two Two</div>\r\n    )\r\n  }\r\n}\r\n\r\n\r\nconst TwoHome = () => {\r\n  return (\r\n    <div>Two Home</div>\r\n  )\r\n}\r\n\r\n\r\nclass One extends Component {\r\n  componentWillUnmount () {\r\n    console.log(\"ONE UNMOUNTING\")\r\n  }\r\n  render () {\r\n    return (\r\n      <div style={{ width: 300, border: '1px solid black', backgroundColor: 'orange', minHeight: 200}}>\r\n        One one one one one one one one one one<br />\r\n        One one one one one one one one one one<br />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nconst Two = () => {\r\n  return (\r\n    <div style={{ width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}>\r\n      <Match pattern='/two/one' component={TwoOne} />\r\n      <Match pattern='/two/two' component={TwoTwo} />\r\n      <Match pattern='/two(/)?' exactly={true} component={TwoHome} />\r\n    </div>\r\n  )\r\n}\r\n\r\n\r\nclass App extends Component {\r\n\r\n  render () {\r\n    return (\r\n        <BrowserRouter>\r\n          <div style={{padding: 12}}>\r\n            <div style={{marginBottom: 12}}>\r\n              <Link to='/one'>One</Link> || <Link to='/two'>Two</Link>\r\n              || <Link to='/two/one'>Two One</Link>\r\n              || <Link to='/two/two'>Two Two</Link>\r\n            </div>\r\n            <div style={{position: 'relative'}}>\r\n              <MatchWithFade pattern='/one' component={One} />\r\n              <MatchWithFade pattern='/two' component={Two} />\r\n            </div>\r\n          </div>\r\n        </BrowserRouter>\r\n    )\r\n  }\r\n}\r\n\r\nexport default App; \r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/chenglou/react-motion/issues/comments/272885447","html_url":"https://github.com/chenglou/react-motion/issues/415#issuecomment-272885447","issue_url":"https://api.github.com/repos/chenglou/react-motion/issues/415","id":272885447,"user":{"login":"bmueller-sykes","id":12236379,"avatar_url":"https://avatars.githubusercontent.com/u/12236379?v=3","gravatar_id":"","url":"https://api.github.com/users/bmueller-sykes","html_url":"https://github.com/bmueller-sykes","followers_url":"https://api.github.com/users/bmueller-sykes/followers","following_url":"https://api.github.com/users/bmueller-sykes/following{/other_user}","gists_url":"https://api.github.com/users/bmueller-sykes/gists{/gist_id}","starred_url":"https://api.github.com/users/bmueller-sykes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bmueller-sykes/subscriptions","organizations_url":"https://api.github.com/users/bmueller-sykes/orgs","repos_url":"https://api.github.com/users/bmueller-sykes/repos","events_url":"https://api.github.com/users/bmueller-sykes/events{/privacy}","received_events_url":"https://api.github.com/users/bmueller-sykes/received_events","type":"User","site_admin":false},"created_at":"2017-01-16T15:04:16Z","updated_at":"2017-01-16T15:04:16Z","body":"Just to update here: I posted an issue to Github Issues on the RR repo, but they more or less ignored it, saying it was a support request rather than a bug report. They did say a new version of RRv4 is coming that contains non-trivial re-writes, so perhaps it makes sense to wait for that to be released and then retest. Unclear when they plan to release the next version."}}
{"actor":{"display_login":"bmueller-sykes"}}