React router transitions

[nzambello]

Fixes #654.

I renamed ScrollToTop to AnimationWrapper because I added functionalities to it.
Now, when it detect a location change, applies some CSS classes. With those CSS classes, we can easily animate on opacity or whatever else and it's easy to change animations unlike with js libraries.

[robgietema]

When I test the branch I see the header is a bit strange, the logo is above the navbar and the searchbar below. Some weird side effects. Any ideas?

[nzambello]

@robgietema I saw it while developing, but not in the last version I committed.
Anyway, the only thing I can think about is the div I have put for handling css classes, but it's not in the header. 🤔

[tisto]

@nzambello the router animations work like a charm. I'd really like to merge this now so we can try it out in our projects and find possible issues. Though, the header is currently somehow broken:

Could you image to have a look?

[tisto]

FYI: There are also two accessibility violations on the front page that are not in master.

[tisto]

Seems this has something to do with Server Side Rendering. This error pops up in the console:

Warning: Expected server HTML to contain a matching <div> in <div>.

[tisto]

The animations itself work like a charm. We have a problem with the hydrate function. It seems the HTML from the SSR differs from the client-side HTML.