Using material ui tabs with react router?

Question

I have a project in react/typescript. I have a react router that looks like this

const Root = () => (
    <>
      <NavBar/>
      <Router>
        <Route path="/" component={Home} />
          <Route path="/timer" component={TimerPage} />
      </Router>
    </>
);

And I have a material-ui appbar that looks like this

export default function NavBar() {
  return (
      <div>
        <AppBar position="static">
          <Tabs>
              <Tab label="Timer" to="/timer" component={TimerPage}  />
          </Tabs>
        </AppBar>
      </div>
  );
}

There are a few issues - first the 'to' in Tab doesn't compile. Secondly, how do I make these two components work together, given they do very similar things?

Does this answer your question? Using material-UI tabs with react — Rajiv
– Rajiv, Commented Dec 9, 2020 at 17:14

Adriano Machado · Accepted Answer · 2020-12-09 15:45:18Z

0

If you are trying to navigate to another page, wrap your tab component, let react-router handle with the navigation and navigate using react-router history,

 <Tabs value={value} onChange={handleChange} aria-label="simple tabs 
     example">
   <div onClick={() => history.push("/timer")}>
        <Tab   label="Timer" />
    </div>
  </Tabs>

edited Dec 9, 2020 at 15:45

answered Dec 9, 2020 at 15:38

Adriano Machado

17010 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

109149 · Accepted Answer · 2020-12-09 17:09:22Z

<Router>
        <Route path="/" component={Home} />
        <Route path="/timer" component={TimerPage} />
</Router>

Route should be inside Switch. Also, if you write path="/" this means that whatever page you will visit will still go to "home" page. This is because react-router does something like "least" checking of routes. So, if you had defined path "/images", before "/images/1", both will route you to "/images". Instead you could change the order of these paths, or add exact keyword before the first one.

Take a look at example below.

<Router>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/timer" component={TimerPage} />
    </Switch>
</Router>

or

<Router>
    <Switch>
        <Route path="/timer" component={TimerPage} />
        <Route path="/" component={Home} />
    </Switch>
</Router>

As for your second issue, you should put your AppBar (or div or any container) inside Router and assign Link to component property of Tab:

<Router>
    <AppBar position="static">
          <Tabs>
              <Tab label="Timer" to="/timer" component={Link}  />
          </Tabs>
    </AppBar>
</Router>

Keep in mind that Link component is imported from react-router and not from @mui.

Collectives™ on Stack Overflow

Using material ui tabs with react router?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related