尝试导入错误：“Switch”未从“react-router”导出答案

【问题标题】：Attempted import error: 'Switch' is not exported from 'react-router'尝试导入错误：“Switch”未从“react-router”导出
【发布时间】：2023-03-11 12:53:02
【问题描述】：

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

并且为了带我去元素的内容，我用了“Switch”，但是它不接受它，这我有一个错误：

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

知道我将 React 与 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>
    );
}

【问题讨论】：

您的import 声明在哪里？而Switch 是从react-router-dom 而不是react-router 导出的。

标签： reactjs typescript

【解决方案1】：

你需要的包是react-router-dom：

安装软件包

npm install react-router-dom

由于您使用的是 TypeScript，因此还要安装类型定义：

npm install @types/react-router-dom

导入

import { Route, Switch, Redirect } from 'react-router-dom'; // for example

【讨论】：

问题仍然存在。
找不到模块：无法解析“react-router-dom”
您安装了这些软件包吗？ npm install react-router-dom
是的，但问题仍然存在，我遇到了第二个问题，它是：尝试导入错误：'Navigate' 不是从'react-router-dom' 导出的。
是的，npm install react-router-dom 和 npm install @types/react-router-dom

【解决方案2】：

<Switch> 函数在 react-router-dom 上可用，直到版本 5。

在 react-router-dom 版本 6 上，它被替换为 <Routes>。

关于缺少的 Navigate()，函数是 useNavigate() 并且存在于 react-router-dom 版本 6。

另外，澄清一下，react-router-dom 具有 react-router 的所有功能。 https://www.npmjs.com/package/react-router

【讨论】：

【解决方案3】：

先安装react-router-dom使用旧版本

npm install react-router-dom@5.2.0

请尝试import react-router-dom 到您的代码并实现switch、link 和route

它适用于我，它也适用于你。

【讨论】：