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

Question

I have a project in order to monitor employees and I have a side bar, and this side bar contains one element, and when clicking on this element, it should take me to the content of that element.

And in order to take me to the content of the element, I used "Switch", but it did not accept it, and this I had an error:

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

Knowing that I use React with TypeScript.

How can I solve the problem?

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> function was avaliable on react-router-dom till version 5.

On react-router-dom version 6, it was replaced by <Routes>.

About the missing Navigate(), the function is useNavigate() and is present on react-router-dom version 6.

Also, to clarify, react-router-dom has all functionalities that react-router have. https://www.npmjs.com/package/react-router

Answer 2

The package you need is react-router-dom:

Install the package(s)

npm install react-router-dom

Since you are using TypeScript, also install the type definitions:

npm install @types/react-router-dom

Import

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