Reactjs 如何从两个选项卡面板材质ui更改url，这取决于另一个组件的[id]？

我使用的是React框架，情况是我的子组件中有两个选项卡面板，而且我使用的是虚拟数据，因为原始数据仍在进行中，并且我没有为所有组件使用类

这是我的主要组成部分：

export const MainComponent: React.FC<Test> = (props: Test) => {
    console.log(props);

    const show = (e: React.MouseEvent<HTMLElement>) => {
        Router.push(e.currentTarget.dataset.item!!);
    };

    function createData(id: number, activity: string);
    }

    const rows = [
        createData(1, 'Act1'),
        createData(2, 'Act2'),
    ];

    return (
        <div>
            <Card>
                <CardContent>
                    <Table size='small' aria-label='a dense table'>
                        <TableHead>
                            <TableRow>
                                <TableCell align='left'><strong>Activity</strong></TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {rows.map((row) => (
                                <TableRow key={row.id}>
                                    <TableCell component='th' scope='row'>
                                        {row.activity}
                                    </TableCell>
                                    <TableCell align='center'>
                                        <Box display={'inline'} mx={1}>
                                            <Button
                                                size='small'
                                                variant='contained'
                                                onClick={show}
                                                data-item={`/main/${row.id}`}
                                            >
                                                EDIT
                                            </Button>
                                        </Box>
                                        <Button
                                            size='small'
                                            variant='contained'
                                        >
                                            DELETE
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        </div>
    );
};

export const main组件：React.FC=（道具：测试）=>{
控制台日志（道具）；
const show=（e:React.MouseEvent）=>{
Router.push（e.currentTarget.dataset.item！！）；
};
函数createData（id:编号，活动：字符串）；
}
常量行=[
createData（1，“Act1”），
createData（2，‘Act2’），
];
返回(
活动
{rows.map（（row）=>(
{row.activity}
编辑
删除
))}
);
};

这是具有2个选项卡组件的子组件，因此url将为“/main/[id]”

功能选项卡面板（道具：任意）{
const{children，value，index，…other}=props；
返回(
{value===索引&&(
{儿童}
)}
);
}
函数OrderProps（索引：any）{
返回{
“aria控件”：“全宽选项卡面板-${index}”，
'id'：`full width tab-${index}`，
};
}
导出常量MainIdInputComponent:React.FC=（道具）=>{
常量[tabValue，setTabValue]=React.useState（0）；
常量handleChange=（事件：React.ChangeEvent）=>{
如果（tabValue==1）{
设置值（0）；
}否则{
设置值（1）；
}
};
const show=（e:React.MouseEvent）=>{
Router.push（e.currentTarget.dataset.item！！）；
};
控制台日志（道具）；
返回(
{'Back'}
);
};

url ID起作用，但当我按下选项卡面板页面时，它确实会更改为页面，但不会更改url，并且两个面板仍然相同。如何更改url？如果按默认选项卡，则url将为/main/[id]，显示infoComponent，但如果按pageComponent，则我希望使url/main/[id]/页面不消失tabpanel

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

    return (
        <Typography
            component='div'
            role='tabpanel'
            hidden={value !== index}
            id={`full-width-tabpanel-${index}`}
            aria-labelledby={`full-width-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={2}>
                    <Typography component='div'> {children}</Typography>
                </Box>
            )}
        </Typography>
    );
}

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

export const MainIdInputComponent: React.FC = (props) => {
    const [tabValue, setTabValue] = React.useState(0);

    const handleChange = (event: React.ChangeEvent<{}>) => {
        if (tabValue === 1) {
            setTabValue(0);
        } else {
            setTabValue(1);
        }
    };

    const show = (e: React.MouseEvent<HTMLElement>) => {
        Router.push(e.currentTarget.dataset.item!!);
    };

    console.log(props);
    return (
        <Grid>
            <Grid item={true}>
                <Button variant='outlined'
                        onClick={show}
                        data-item={'/main'}
                        size='medium'
                        color='default'>
                    {'Back'}
                </Button>
            </Grid>
            <Grid item={true}>
                <Paper square={true}>
                    <Tabs
                        value={tabValue}
                        indicatorColor='primary'
                        textColor='primary'
                        onChange={handleChange}
                        variant='fullWidth'
                    >
                        <Tab label='info' {...OrderProps(0)}/>
                        <Tab label='page' {...OrderProps(1)}/>
                    </Tabs>
                </Paper>
                <TabPanel value={tabValue} index={0}>
                    <InfoComponent/>
                </TabPanel>
                <TabPanel value={tabValue} index={1}>
                    <PageComponent/>
                </TabPanel>
            </Grid>
        </Grid>
    );
};