How do you get Material-UI Tabs to work with react-router?

Question

I am trying to get Material-UI tabs to work with routing, and while the routing is working and displaying the selected tab, the smooth animation of navigating between tabs is no

Answer 1

The way you are using Routes here are inefficient.

It should be Tabs are implemented in one place and only one place as this (simply no need to use HomeHeader in every page):

as you can see tabs are asking for link and routes in the switch render compnents

for the animation I used this article: https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

here they are using react-addons-css-transition-group

please find the animation index.css file in demo

I wrapped pages from a HOC to make routing easier ( PageShell componet)

here is a working example:https://codesandbox.io/s/04p1v46qww

hope this will give you a head start