export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

Question

I am getting this error export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' on updating my react-router-dom to 6.2.1.

Here is my Main.jsx

export default function Main(props) {
  const classes = useStyles();
  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}>
              <Switch>
                {routes.map((route, key) => (
                  <Route key={key} exact path={route.path}>
                    <route.Content />
                  </Route>
                ))}
              </Switch>
            </Paper>
          </Grid>
        </Grid>
        <Box pt={4}>
          <Copyright />
        </Box>
      </Container>
    </main>
  );
}

I have tried replacing the Switch with Routes but that breaks my frontend. What should I do?

Help would be much appreciated.

Thank you!

Solution

In version 6, Switch got replaced by Routes. Try this import {Routes} from 'react-router-dom';.

Comments

[Mayur Vaghasiya]

Does this answer your question? Attempted import error: 'Switch' is not exported from 'react-router-dom'

[Mayur Vaghasiya]

installed version 5.2.0 of react-router-dom npm install [email protected]

[Nabeel Hassan]

I tried the suggestions in above answer but my frontend becomes a blank white screen, anything I can do to fix this while staying at version ^6.2.1" of react-router-dom?

[Drew Reese]

You need to fix the Route components too. Read through the v5 -> v6 upgrade guide and try to understand all the changes and apply them to your project.

[Nabeel Hassan]

Thank you so much, fixing the Route component fixes the issue.

[Nabeel Hassan]

Tried that import and then replaced the <Switch></Switch> tags with <Routes></Routes> but that breaks my frontend which just becomes a blank white screen, any suggestion as to what do I do about that?

[swimshahriar]

see, this reactrouter.com/docs/en/v6/upgrading/v5