Menu
I have a web app that I'v designed with material-UI and as you can see below I'm using Button navigation for navigating through my basic landing page components.
<div className="footer"> <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}> <BottomNavigationAction label="signal" value="signal" icon={<ShowChart />} className={classes.content}/> <BottomNavigationAction label="hotlist" value="hotlist" icon={<HotList />} className={classes.content}/> <BottomNavigationAction label="analyze" value="analyze" icon={<PieChart />} className={classes.content}/> <BottomNavigationAction label="learn" value="learn" icon={<LibraryBooks/>} className={classes.content}/> <BottomNavigationAction label="dashboard" value="dashboard" icon={<PermIdentity/>} className={classes.content}/> </BottomNavigation> </div> I've tried to use React-Router with these predefiend navigation component but that didn't work, is there any possible way to use Router with Button navigation of material-UI? Button navigation article in material-UI ButtonNavigation API
989
To use a button as a link in React, wrap the button in an <a> tag or a Link component if using react router. The button will get rendered instead of the link and clicking on it will cause the browser to navigate to the specified page.
React Navigation is a popular library for routing and navigation in a React Native application. This library helps solve the problem of navigating between multiple screens and sharing data between them.
To navigate to the courses route, we will use the history. push method of the useHistory object. We will add an event handler “onClick” for our button component and define a function “coursesPage ” that handles the click event. The coursesPage function enables us to redirect to another route on clicking the button.
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.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
