How to Add route links to material ui tabs in react typescript

Question

I'm using ts in react. How to add the route links to the tabs in my code

import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

interface TabPanelProps {
  children?: React.ReactNode;
  index: any;
  value: any;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: any) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

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

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

I want to make the links like /home/item1, /home/item2 and so on.

How to add this in typescript of react. Navigating on tabs should update the url on browser address bar. Or if the user hits directly /home/item2, it should open that tab by default

Answer 1

You can set the Tab to render as a Link using the component prop like this:

import { Link } from 'react-router-dom'

...

<Tab
  ...
  component={Link}
  to="/home/item1"
/>

Note, it also passes through any other non-Tab props to component , so you can specify the to prop of the Link or any others you need to set.

To set the selected tab from the route, figure out the appropriate index from the location (you can get this from useLocation ) and init the value state with that index instead of hardcoding to 0 :

const location = useLocation()
const selectedIndex = figureOutSelectedIndex(location)

const [value, setValue] = React.useState(selectedIndex);