Yes, it’s possible. You need to use the component
prop:
import { Link } from 'react-router-dom';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
// ....
<BottomNavigation value={value} onChange={this.handleChange}>
<BottomNavigationAction
component={Link}
to="/signal"
label="signal"
value="signal"
icon={<ShowChart />}
className={classes.content}
/>
</BottomNavigation>
(the to
prop is for React Router’s Link
component)
This works with any Material-UI component that inherits from ButtonBase
.
https://material-ui.com/api/bottom-navigation-action/
Inheritance
The properties of the ButtonBase component are also
available. You can take advantage of this behavior to target nested
components.
https://material-ui.com/api/button-base/
Props
component
– The component used for the root node. Either a string to use a DOM element or a component.