Material-ui adding Link component from react-router

Question

I\'m struggling to add component to my material-ui AppBar

This is my navigation class:

class Navigation extends Component          


        

Answer 1

TypeScript implementation of the router-driven tabs.

For those who look for the TypeScript implementation. Easy configurable. Driven by tabs configuration.

interface ITabsPageProps {
  match: match<{page: string}>;
  history: History;
}

const tabs = [{
  label: 'Fist Tab',
  link: 'fist-tab',
  component: 
}, {
  label: 'Second Tab',
  link: 'second-tab',
  component: 
}, {
  label: 'Third Tab',
  link: 'third-tab',
  component: 
}];

export class TabsPage extends React.Component {
  handleChange(tabLink: string) {
    this.props.history.push(`/tabs-page/${tabLink}`);
  }

  render() {
    const currentTab = this.props.match.params.page;
    const selectedTab = tabs.find(tab => currentTab === tab.link);

    return (
      
         this.handleChange(value)}
        >
          {tabs.map(tab => (
            
          ))}
        

        {selectedTab && selectedTab.component}
      
    );
  }
}