Reactjs 尝试导入错误：'；开关'；不是从'；反应路由器&x27；

我有一个项目来监控员工，我有一个侧栏，这个侧栏包含一个元素，当点击这个元素时，我应该会看到该元素的内容

为了让我了解元素的内容，我使用了“Switch”，但它不接受它，我有一个错误：

      import error: 'Switch' is not exported from 'react-router'.

知道我使用React with TypeScript

我怎样才能解决这个问题

const drawerWidth = 300;

interface Props {
    className?: string
    link?: string | null // because the InferProps props allows alows null value
    onClick?: (event: React.MouseEvent<HTMLElement>) => void
    window?: () => Window;
}


export default function ResponsiveDrawer(props: Props) {
    const {window , link} = props;
    const classes = useStyles();
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = React.useState(false);

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const drawer = (
        <div style={{/*boxShadow: 'inset 0 0 10px'*/  boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 25px 
           2.6px'}}>
            <div className={classes.toolbar}/>
            <Button startIcon={<ArrowBackIosIcon/>}
                    style={{marginLeft: '3.5rem', borderRadius: 24, background: '#7b68ee', fontSize: 
             '1.4rem'}}
                    variant="contained">
                Back
            </Button>
            <Box sx={{p: 5}}>

                <h1 style={{paddingLeft: '1rem', fontSize: '2rem', color: '#d5d6d7'}}>Settings</h1>
                {/*workspace Name*/}
                <Typography style={{
                    paddingLeft: '1rem',
                    fontSize: '1.6rem',
                    color: '#7b68ee',
                    fontWeight: 700
                }}>Slark</Typography>
                <List>
                    {/*<Link to='/setting/sidebar/settings' style={{textDecoration: 'none', color: 
               'red'}}>*/}
                        <ListItem button component={forwardRef((props: NavLinkProps, ref: any) => 
                <NavLink exact {...props} innerRef={ref} />)}
                                  to='/setting/sidebar/settings'>
                            <ListItemText
                                style={{color: '#d5d6d7'}}
                                classes={{
                                  primary: classes.fontSize,
                                }} primary="Settings"/>
                        </ListItem>
                        
                </List>
               
            </Box>
        </div>
    );

    const container = window !== undefined ? () => window().document.body : undefined;

    return (
        <div className={classes.root}>
            <CssBaseline/>

            <nav className={classes.drawer} aria-label="mailbox folders">
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        // anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
                <Hidden xsDown implementation="css">
                    <Drawer
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        variant="permanent"
                        open
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
           <main className={classes.content}>

                <Container maxWidth="lg">

                    <Switch>
                        <Route path="/setting/sidebar/my-settings" exact component={SettingsPage} />
                    </Switch>

                </Container>
            </main>
        </div>
    );
}

const抽屉宽度=300；
界面道具{
类名？：字符串
link？：string | null//因为InferProps props允许一个空值
onClick？：（事件：React.MouseEvent）=>void
窗口？：（）=>窗口；
}
导出默认函数ResponsiveDrawer（道具：道具）{
const{window，link}=props；
const classes=useStyles（）；
const theme=useTheme（）；
const[mobileOpen，setMobileOpen]=React.useState（false）；
常量handleDrawerToggle=（）=>{
setMobileOpen（！mobileOpen）；
};
常数抽屉=(
返回
设置
{/*工作区名称*/}
斯拉克
{/**/}
)}
to='/setting/sidebar/settings'>
);
常量容器=窗口！==未定义？（）=>window（）.document.body：未定义；
返回(
{抽屉}
{抽屉}
);
}

您需要的软件包是

react router dom

：

npm安装路由器dom

由于您使用的是TypeScript：

npm安装@types/react路由器dom

导入所需的组件：

从'react router dom'导入{Route，Switch，Redirect}；//例如

import语句在哪里？从

react-router-dom

not

react-router

导出

Switch

。问题仍然存在。您收到了什么错误消息？未找到模块：无法解析“react-router-dom”您安装了包吗

npm安装react router dom

yes，但问题仍然存在，我遇到了第二个问题：尝试导入错误：“导航”未从“react router dom”导出。