关于react路由切换的动画问题

Question

大家帮我看看
下面这个路由切换动画，我有几个疑问

1. 为什么Switch组件需要加location属性？
2. 为什么TransitionGroup组件需要作为Route的component值？
3. 写法好别扭，就没有更简洁的写法吗？

以上，麻烦各位了！

Answer 1

下次你可以把代码整个复制下来么？你这个图真心不太容易看。

1. <Switch location /> location 是传入的 props，如果你想知道为什么传入进去，可以跟踪下 Switch 代码。
2. 你可以看看 react router 的文档，在 <Router component={...}> component 值表示对应路由要显示的组件，你可以直接 return（就是你现在的写法）。
3. 如果你要更好的写法，可以把 TransitionGroup 创建一个 js，再包一层组件 <TransitionGroupWare>。然后把 TransitionGroupWare 赋值到 component 中。

Answer 2

。。 请问你这个代码运行实现了吗， 我跟着你的代码敲的也没实现了 ， 报错 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Answer 3

没有用动画组件，直接上velocity.js，保证代码简洁的同时，效果依然很不错哦。封装动画组件，完全限制动画配置的灵活性，感觉有点把简单事复杂化，用着还变扭。其实直接在合适的生命周期钩子函数中进行对应的逻辑就OK了。