Menu
Im trying to create a list of links in a sidebar. The problems is that if I use
<ListItem button component='a' href="/persons">
The page reloads instead of going to the url like a Link component would do.
<Link to='/persons' >
I wonder, how can I replace the Material UI listItem href behaviour with the react-router Link behaviour? This is the list im trying to fix:
// this breaks the design
<Link to='/persons' >
<ListItem button>
<ListItemIcon>
<Icon>people</Icon>
</ListItemIcon>
<ListItemText primary="Personas" />
</ListItem>
</Link>
// this reloads the page, i want to avoid
<ListItem button component='a' href="/persons">
<ListItemIcon>
<Icon>bar_chart</Icon>
</ListItemIcon>
<ListItemText primary="Reports" />
</ListItem>
This is how the link looks:
930
You can use the component prop of Material-UI's Link to integrate with Link in react-router-dom . You can do the same thing with Material-UI's Button .
First, create a new react application, react-materialui-app using Create React App or Rollup bundler by following instruction in Creating a React application chapter. Next, open the application in your favorite editor. Next, create src folder under the root directory of the application.
To add the link in the menu, use the <NavLink /> component by react-router-dom . The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active.
You can use Link as the component of the ListItem and use it as the following
<List>
<ListItem component={Link} to="/reports">
<ListItemIcon>
<Icon>bar_chart</Icon>
</ListItemIcon>
<ListItemText primary="Reports" />
</ListItem>
</List>
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
