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!

Does this answer your question? [Attempted import error: 'Switch' is not exported from 'react-router-dom'](https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom) — Mayur Vaghasiya, Jan 18 '22 at 06:47
installed version 5.2.0 of react-router-dom `npm install react-router-dom@5.2.0` — Mayur Vaghasiya, Jan 18 '22 at 06:49
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? — Nabeel Hassan, Jan 18 '22 at 06:57
You need to fix the `Route` components too. Read through the [v5 -> v6 upgrade guide](https://reactrouter.com/docs/en/v6/upgrading/v5) and try to understand all the changes and apply them to your project. — Drew Reese, Jan 18 '22 at 06:57
Thank you so much, fixing the Route component fixes the issue. — Nabeel Hassan, Jan 18 '22 at 07:00
https://reactrouter.com/en/main/upgrading/v5#upgrade-all-switch-elements-to-routes — rahulspoudel, Dec 28 '22 at 08:55

score 19 · Answer 1 · answered Jan 18 '22 at 06:47

19

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

answered Jan 18 '22 at 06:47

swimshahriar

665
4
10

3

Tried that import and then replaced the `` tags with `` but that breaks my frontend which just becomes a blank white screen, any suggestion as to what do I do about that? – Nabeel Hassan Jan 18 '22 at 06:55
1

see, this https://reactrouter.com/docs/en/v6/upgrading/v5 – swimshahriar Jan 18 '22 at 06:57
@swimshahriar that link is sadly 404 now – Neil Feb 16 '23 at 19:21
1

@Neil this is the new one. https://reactrouter.com/en/6.8.1/upgrading/v5 – swimshahriar Feb 17 '23 at 06:13
In case it shows up blank, you need to check if you added the desired Component within the Route element attribute. Instead of `` use `} />` – Junior Mayhé Mar 14 '23 at 20:33

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

1 Answers1