这很难解释，但这里什么都没有。我为导航栏创建了一个可重用的组件，但是由于它是可重用的，我使用了一个数据文件来创建静态文本，但是我希望这个静态文本是可点击的（带你到另一个组件），我不知道怎么做。
//这是抽屉

import React from 'react';
import {sectionOne, sectionTwo, sectionThree, sectionFour, sectionFive} from './appTabBarData';

export const DrawerSection = ({sectionOne, sectionTwo, sectionThree, sectionFour, sectionFive}) => {
    return (
        <>
            <div>{sectionOne}</div>
            <div>{sectionTwo}</div>
            <div>{sectionThree}</div>
            <div>{sectionFour}</div>
            <div>{sectionFive}</div>
        </>
    );
};

//这是我的tabbar.js

import React from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '@material-ui/core/styles';
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';
import {DrawerSection} from '../TabBarDrawer/drawer';
import {appTabBarOne, appTabBarTwo, appTabBarThree} from '../TabBarDrawer/Data';
import CancelIcon from '@material-ui/icons/Cancel';

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

    const indexZero = () => {
        if (index === 0 || index === 4) {
            return index;
        } else {
            return null;
        }
    };
    return (
        <div role="tabpanel" hidden={indexZero(index)} {...other}>
            {value === index && (
                <Box p={5} height="100%" bgcolor="primary.main">
                    <CancelIcon />
                    <Typography component="div">{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired
};

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        display: 'flex',
        height: 1000
    },
    tabs: {
        borderRight: `1px solid ${theme.palette.divider}`,
        backgroundColor: '#12395B'
    },
    indicator: {
        left: '0px',
        background: 'yellow'
    }
}));

export default function VerticalTabs(props) {
    const classes = useStyles();
    const [selectedTab, setSelectedTab] = React.useState(0);

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    };

    return (
        <div className={classes.root}>
            <Tabs
                orientation="vertical"
                variant="scrollable"
                value={selectedTab}
                onChange={handleChange}
                className={classes.tabs}
                classes={{indicator: classes.indicator}}
            >
                <Tab label="Home" style={{color: '#E8E8E8'}} />
                <Tab label="Queues" style={{color: '#E8E8E8'}} />
                <Tab label="Reports" style={{color: '#E8E8E8'}} />
                <Tab label="Teams" style={{color: '#E8E8E8'}} />
                <Tab label="Switch" style={{color: '#E8E8E8'}} />
            </Tabs>

            <TabPanel value={selectedTab} index={0}>
                Home
            </TabPanel>
            <TabPanel value={selectedTab} index={1}>
                <DrawerSection {...appTabBarOne} />
            </TabPanel>
            <TabPanel value={selectedTab} index={2}>
                <DrawerSection {...appTabBarTwo} />
            </TabPanel>
            <TabPanel value={selectedTab} index={3}>
                <DrawerSection {...appTabBarThree} />
            </TabPanel>
            <TabPanel value={selectedTab} index={4}>
                Switch
            </TabPanel>
        </div>
    );
}

//data.js

export const appTabBarOne = {
    sectionOne: 'A',
    sectionTwo: 'B',
    sectionThree: 'C',
    sectionFour: 'D',
    sectionFive: 'E'
};
export const appTabBarTwo = {
    sectionOne: 'F',
    sectionTwo: 'G',
    sectionThree: 'H',
    sectionFour: 'I'
};
export const appTabBarThree = {
    sectionOne: 'J',
    sectionTwo: 'K',
    sectionThree: 'L'
};