Using material-UI tabs with react

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