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

Admin 1
Viewed 6596

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>
    );
}
typescript reactjs
4 Answers

<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

user_165966380

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
user_123789230

First install react-router-dom use the older version

npm install react-router-dom@5.2.0

Please try to import react-router-dom to your code and implement switch, link and route

It works for me it will work for you as well.

user_138659860

For react-router-dom@6.3.0, replace Switch with Routes and then component with element.

import { Routes, Route} from "react-router-dom";

<Routes>
    <Route path="/home" element={<Home/>} />
</Routes>
user_66856190
Related