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

Here's another implementation of React with hooks, Material-UI with tabs, React Router with Link, and TypeScript.

import * as React from "react";
import { BrowserRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import { default as Tab, TabProps } from '@material-ui/core/Tab';

import Home from './Home';
import ProductManagement from './ProductManagement';
import Development from './Development';
import HomeIcon from '@material-ui/icons/Home';
import CodeIcon from '@material-ui/icons/Code';
import TimelineIcon from '@material-ui/icons/Timeline';

const LinkTab: React.ComponentType = Tab as React.ComponentType;

function NavBar() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    

      
        
          } component={Link} to="/" />
          } component={Link} to="/dev" />
          } component={Link} to="/pm" />
        
      
    
  )
};

export default function App() {
  return (
    
      

        
        
          
          
          
          
        
      
    
  )
}