Material-UI + React Router - #7 Navigation Menu
Now that we got a drawer going, it's time to implement a side menu with links. Your first instinct might be to use a List with ListItem's for each link in the navbar. When the link is active, we'd want to make its list item selected. However, as it turns out, lists in MUI don't allow for selectable items https://github.com/mui-org/material-u... The good news is that a Menu component does.
Integrating React Router library with Material UI is rather trivial. Built-in components such as Button and MenuItem expose an optional "component" prop which allows to tweak the underlying node for the component. If we pass down a Link from react-router-dom, then the Button will effectively become a nav link. Any remaining props that we pass, including "to", will be spread out on the element. See an example in the links below.
Lastly, I'll show you how you can group multiple HOCs into one with a util function from the recompose package. Though you could still get away by nesting HOCs one inside the other, recompose will get the job done in a cleaner way. After all, why not experiment with it when it's already installed as a sub-dependency?
Menu https://material-ui.com/demos/menus/
Routing in MUI https://github.com/acdlite/recompose#...
Recompose https://github.com/acdlite/recompose#...
Watch video Material-UI + React Router - #7 Navigation Menu online without registration, duration hours minute second in high quality. This video was added by user Code Realm 14 June 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 85,50 once and liked it 59 people.