react-route-domにtransitionの機能を加えるパッケージを作った

Web サイト開発のモチベーションが下がってくると、気分転換に Web 用パッケージ開発を行うという、我ながら病気じみてます。

react-router-dom-transition

react-route-dom という、react にルーティングの機能を加えてくれる、とても便利なパッケージがありまして。

機能の一つに、Switch というコンポーネントがありまして、サイト内でルーティングが発生した際、URL に合わせてコンポーネントの出し分けを行ってくれます。

で、言わずもがな、コンポーネントの出し分けが render 内で行われる以上、前のコンポーネントと後のコンポーネントを組み合わせたアニメーションは、どうやっても作れませんでした。

そこで、強引に 2 つのコンポーネントを表示し、かつきちんと DOM の後処理も行うことにより、アニメーションを加えれるようにしただけのパッケージを作ってみました。

ソースコードはここに上げてますので、バグなどありましたら(というかまちがいなくあるんですけど)、ばんばん指摘して頂けると幸いです…。