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

To track active tab you can use location as tab value. And use router location as value for Tabs component. This way you achive change tabs animation out of box and highlight active tab when load page directly.

export const Module: React.FC = props => {
    const match = useRouteMatch();
    const location = useLocation();

    return (
        <>
            
                
                
            
            
                
                    
                
                
                    
                
                
                    
                
            
        
    );
}