react-route-domにtransitionの機能を加えるパッケージを作った
2018-09-08
Web サイト開発のモチベーションが下がってくると、気分転換に Web 用パッケージ開発を行うという、我ながら病気じみてます。
react-route-dom という、react にルーティングの機能を加えてくれる、とても便利なパッケージがありまして。
機能の一つに、Switch というコンポーネントがありまして、サイト内でルーティングが発生した際、URL に合わせてコンポーネントの出し分けを行ってくれます。
で、言わずもがな、コンポーネントの出し分けが render 内で行われる以上、前のコンポーネントと後のコンポーネントを組み合わせたアニメーションは、どうやっても作れませんでした。
そこで、強引に 2 つのコンポーネントを表示し、かつきちんと DOM の後処理も行うことにより、アニメーションを加えれるようにしただけのパッケージを作ってみました。
ソースコードはここに上げてますので、バグなどありましたら(というかまちがいなくあるんですけど)、ばんばん指摘して頂けると幸いです…。