如何根据两个组件的[id]更改两个选项卡面板材料ui中的url？

问题描述

我正在使用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>
    );
};

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

 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>
    );
};

URL ID有效，但是当我按选项卡面板页面时，它确实更改为页面，但没有更改为URL，并且两个面板仍然相同。还要如何更改url？如果按下默认选项卡，则该URL将为显示信息组件的/ main / [id]，但是如果我按下pageComponent，则希望将URL / main / [id] / page设置为不使选项板消失。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）