Sometimes, we want to use a Material UI button navigation with React Router.

In this article, we’ll look at how to use a Material UI button navigation with React Router.

How to use a Material UI button navigation with React Router?

To use a Material UI button navigation with React Router, we can set the component prop of the BottomNavigationAction component to Link.

For instance, we write

import { Link } from "react-router-dom";

import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";

// ...

<BottomNavigation value={value} onChange={handleChange}>
  <BottomNavigationAction
    component={Link}
    to="/foo"
    label="foo"
    value="foo"
    icon={<ShowChart />}
    className={classes.content}
  />
</BottomNavigation>

to set the component prop of the BottomNavigationAction component to Link.

The to prop of the BottomNavigationAction would be used as the to prop value of the Link.

Conclusion

To use a Material UI button navigation with React Router, we can set the component prop of the BottomNavigationAction component to Link.