尝试导入错误：'Switch'未从'react-router'导出

Question

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

为了让我了解元素的内容，我使用了"；开关"；，但它不接受它，这是我的一个错误：

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

Answer 1

<Switch>功能在react路由器dom上可用，直到版本5。

在react路由器dom版本6上，它被<Routes>所取代。

关于缺少的Navigate((，函数为useNavigate(。

此外，为了澄清，react路由器dom具有react路由器所具有的所有功能。https://www.npmjs.com/package/react-router

Answer 2

您需要的包是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

Answer 3

首次安装react-router-dom时使用旧版本

npm install react-router-dom@5.2.0

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

它对我有效，对你也有效。

Answer 4

对于react-router-dom@6.3.0，用Routes替换Switch，然后用element替换component。

import { Routes, Route} from "react-router-dom";
<Routes>
<Route path="/home" element={<Home/>} />
</Routes>