这两种反应路由器路由方法之间的确切区别是什么？

Question

谁能解释一下这两种 Route 语法之间的确切区别？

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

对比

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

根据文档，component 道具使用 route props 呈现。孩子们也是。但是，我正在路由之间做一些动画，它们的行为有所不同：它适用于第一种方法，不适用于第二种方法。工作沙箱 here。如果您在使用方法 1 的第 1 页和第 3 页之间单击，动画效果很好。如果在使用方法 2 的第 2 页和第 4 页之间单击，动画将不起作用。这是一个错误吗？