Sometimes, we want to add Link component from React Router with React Material UI tabs.

In this article, we’ll look at how to add Link component from React Router with React Material UI tabs.

How to add Link component from React Router with React Material UI tabs?

To add Link component from React Router with React Material UI tabs, we can set the containerElement prop of the Tab component.

For instance, we write

<Tabs onChange={this.changeTab} value={value}>
  <Tab value={0} label="first" containerElement={<Link to="/first" />} />
  <Tab value={1} label="second" containerElement={<Link to="/second" />} />
  <Tab value={2} label="third" containerElement={<Link to="/third" />} />
</Tabs>;

to set containerElement to render the Link component so that we can use the React Router Link component for navigation when we click on each tab.

Conclusion

To add Link component from React Router with React Material UI, we can set the containerElement prop of the Tab component.