Using material-UI tabs with react

Question

Something I stumble upon is understanding how to use Material-UI tabs. I found many posts but each target a different version of material-UI and each give a completely different way of implementation.

The web application I an creating is an analytical dashboard. I have 3 parts on the page.

1. An Appbar
2. main body
3. footer

In the main body part I want to have a tabs component and dashboard component. Selecting different tab will display different dashboard component.

I started with the default Tabs component which didn’t display it right, and then I read that I need to do it using React Router, but then it depends on which router version I use.

It might be that my SPA understanding is also lacking as to why I should involve router when using Tabs.

My setup: Latest React 16.x Latest React -router 4.x Latest Material-UI 1.0.3 Using Redux as well

Solution

here is small example I created using App bar and tabs from Material-ui with react-router

<BrowserRouter>
 <div className={classes.root}>
  <AppBar position="static" color="default">
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
    >
      <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>

here I have used Switch to introduce routes for the application and Link component to trigger route changes

working example: https://codesandbox.io/s/04p1v46qww

I have added transition animation for the example feel free to remove the animation if you wish.

why we use react router

That's when we want add users to go through routes urls and find the relevant pages ex: /home will render home page and /profile for profile page.

with react-router you can use many functionalities like go through history that means you can view previous pages you went with going back.

pass url params so we can render components as params changes

however If a developer wish he can design and finish an app without using routes. It will be a mess with conditional rendering but still.

from the user's view, it is a regular web app (he doesn't need to know how it is designed: SPA or otherwise) and it should work as any web app/website should work. That's what routing does same time help us to do more efficient development.

use this for tabs without using routes: https://codesandbox.io/s/qlq1j47l2w

Hope this will help you

Comments

[Admin]

I’ll try and see if it working for me. Do I have to use the router? If yes what is the reason? I want to understand the reasoning behind what I’m doing

[Nadun]

I have updated the answer feel free to ask any thing if you want more things to clarify

[Nir O.]

looks like there's a bug in the codesandbox example, if you go to tab 'two' and refresh using the refresh icon, it will indeed give you the content of tab two but the header will be set to tab one

[Kartheek]

How to find the index of the tab on reload, So that we can set active tab on reload ?