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

As for the current structure above you can see that the "tabs" are getting re-rendered with the change of the routes.

The way react is built by components holding components, so if you change one component, all of its children will get rendered.

So in your case, this is how the components are structures:

MainApp >
          Route('monitor') > MonitorProductPage > HomeHeader
          Route('sensor') > SensorProductPage > HomeHeader

You can see in this example, as you change a route you change all the content and need to re-render a NEW HomeHeader.

The way, I'll structure it for making sure HomeHeader will get created once and only props will change. (both for performance and for the issue here) Is like this:

MainApp >
          Route('innerpage/*') > InnerPage > 

               > MonitorProductPage
               > SensorProductPage

like this code in react router dom https://reacttraining.com/react-router/web/example/route-config

That means you have a single route that will catch those inner pages, it could be like the above, or catch all (*) Then you will have another router inside InnerPage that will decide which page to show.

const routes = [
{
    path: "/innerpage",
    component: InnerPage
  },
  {
    path: "/monitor",
    component: MonitorProductPage,
  },
  {
    path: "/sensor",
    component: SensorProductPage
  }
];

and Component "InnerPage" will render HomeHeader and inside it will have the router that will decide of its "body"