Material-ui adding Link component from react-router

by

For Material UI 1.0 with Typescript: see this post by @ogglas below.

For Material-UI 1.0 with plain JS:

<Tabs value={value} onChange={this.handleChange}>
  {
    this.props.tabs.map(
      ({label, path})=><Tab key={label} 
                            label={label} 
                            className={classes.tabLink} 
                            component={Link} 
                            to={path} />
    )
  }
</Tabs>

And classes.tabLink is defined as:

tabLink : {
    display:"flex",
    alignItems:"center",
    justifyContent:"center"
}

How this works?

All the mui 1.0 components inheriting from ButtonBase, support a component prop, see ButtonBase. The idea is to allow you to control what the component renders as its wrapper/root element. Tab also has this feature although at the time of writing this answer this prop is not documented explicitly, but as Tab inherits from ButtonBase, all its props carry over (and the documentation does cover this).

Another feature of ButtonBase is that all the extra props, not in use by ButtonBase or inherited component, are spread over the specified component. We have used this behavior to send the to prop used by Link by giving it to Tab control. You can send any additional props in the same way. Note that this is documented explicitly for both ButtonBase and Tab.

Thanks @josh-l for asking this to be added.

More Related Contents:

  1. Intercept/handle browser’s back button in React-router?
  2. ReactJS: [Home] is not a component. All component children of must be a or
  3. React-router URLs don’t work when refreshing or writing manually
  4. Programmatically Navigate using react-router
  5. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  6. Pass props in Link react-router
  7. How to use Redirect in version 5 of react-router-dom of Reactjs
  8. react-router scroll to top on every transition
  9. React Router with optional path parameter
  10. Invalid hook call. Hooks can only be called inside of the body of a function component
  11. Use anchors with react-router
  12. How to make a shared state between two react components?
  13. React Routing works in local machine but not Heroku
  14. Multiple path names for a same component in React Router
  15. React doesn’t reload component data on route param change or query change
  16. react-router getting this.props.location in child components
  17. Get path params in react-router v4
  18. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  19. Client Routing (using react-router) and Server-Side Routing
  20. Multiple Nested Routes in react-router-dom v4
  21. How do I reload a page with react-router?
  22. onEnter not called in React-Router
  23. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  24. react-router go back a page how do you configure history?
  25. How to manually invoke Link in React-router?
  26. Detect change in query param react-router-dom v4.x and re-render component
  27. How to use normal anchor links with react-router
  28. React router global header
  29. How to disable the selection of an item when the first letter of the option is pressed in the Select component?
  30. How can I redirect in React Router v6?

Leave a Comment