Material-UI's Tabs integration with react router 4?

Question

The new react-router syntax uses the Link component to move around the routes. But how could this be integrated with material-ui?

In my cas

Answer 1

The error you are seeing from material-ui is because it expects to have a component rendered as direct child of component.

Now, here is a way that I've found to integrate the link into the component without loosing the styles:

import React, {Component} from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
import {Link} from 'react-router-dom';

export default class MyComponent extends Component {
    render() {
        const {location} = this.props;
        const {pathname} = location;

        return (
            
                } value="/my-firs-tab-view">
                    {/* insert your component to be rendered inside the tab here */}
                
                } value="/my-second-tab-view">
                    {/* insert your component to be rendered inside the tab here */}
                
            
        );
    }
}

To manage the 'active' property for the tabs, you can use the value property in the component and you also need to have a value property for each tab, so when both of the properties match, it will apply the active style to that tab.