Is it possible to use material-ui button navigation with react-router?

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)