2

Can anyone explain the exact difference between these two Route syntaxes?

<Route path="/1">
  {(props) => {
    return <HOCColoredLorem {...props} />;
  }}
</Route>

vs

<Route path="/1" component={HOCColoredLorem} />

According to docs, the component prop is rendered with route props. As are children. However, I'm doing some animation between routes and they behave differently: it works with the first approach, and does not with the second. Working sandbox here. If you click between Pages 1 and 3, which use approach 1, the animation works fine. If you click between pages 2 and 4, which use approach 2, the animation does not work. Is this a bug?

cweber105
  • 535
  • 1
  • 4
  • 21
  • It looks like this might be a byproduct of how react-router renders each approach. With approach 1, the HOC is rendered twice when the link is clicked: once with match equal to the url match, and a second time with match == null. This animates fine. The second approach renders the component 3 times, once match == null, then with match equals the url match, then again with match == null. The first match == null render seems to mess up the animation. – cweber105 May 07 '21 at 01:16
  • https://stackoverflow.com/a/67087661/2873538 – Ajeet Shah May 07 '21 at 01:20
  • Hm. I can make the HOC use the useRouteMatch internally instead of using the passed route props, but the animation doesn't work. – cweber105 May 07 '21 at 01:31
  • Update: if I use a state variable instead of immediately using match for comparison, the enter transition works, but the exit one does not: see [here](https://postimg.cc/V5Gq964z) for example. So it looks like this is kind of wrapped up with how CSSTransition works as well. – cweber105 May 07 '21 at 01:44

0 Answers0