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<IModuleProps> = props => {
    const match = useRouteMatch();
    const location = useLocation();

    return (
        <>
            <Tabs value={location.pathname} >
                <Tab label="Dashboard" component={Link} to={`${match.url}/dashboard`} value={`${match.url}/dashboard`} />
                <Tab label="Audit Results" component={Link} to={`${match.url}/audit-results`} value={`${match.url}/audit-results`} />
            </Tabs>
            <Switch>
                <Route path={`${match.url}/dashboard`}>
                    <Dashboard />
                </Route>
                <Route path={`${match.url}/audit-results`}>
                    <AuditResults />
                </Route>
                <Route path={`${match.url}`}>
                    <Dashboard />
                </Route>
            </Switch>
        </>
    );
}

Answer 2

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):

 <BrowserRouter>
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          fullWidth
        >
          <Tab label="Item One" component={Link} to="/one" />
          <Tab label="Item Two" component={Link} to="/two" />
        </Tabs>
      </AppBar>

      <Switch>
        <Route path="/one" component={PageShell(ItemOne)} />
        <Route path="/two" component={PageShell(ItemTwo)} />
      </Switch>
    </div>
  </BrowserRouter>

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

Answer 3

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"