React Router - "ambiguous indirect export: Switch" error in App component

Question

I am building a React app using React Router, and I am getting an error "ambiguous indirect export: Switch" in my App component. Here is my code:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { Card, CardMedia, CardContent, Typography, Grid } from '@material-ui/core';
import About from './About';

const useStyles = makeStyles((theme) => ({
  // ... other styles
}));

const App = () => {
  const classes = useStyles();

  return (
    <Router>
      <div>
        {/* Displaying the header on all pages */}
        <div className={classes.greeting}>
          <Typography variant="h1">Welcome to the Fractals website!</Typography>
        </div>

        <Switch>
          <Route exact path="/">
            {/* Displaying the home page with cards */}
            <Grid container justifyContent="center">
              {/* Card for the "Theory" page */}
              <Grid item xs={12} sm={6} md={4}>
                {/* Adding a Link component to navigate to the "Theory" page */}
                <Link to="/theory" style={{ textDecoration: 'none' }}>
                  {/* Rest of the card code remains the same */}
                </Link>
              </Grid>

              {/* Other cards follow the same pattern */}
              {/* ... */}
            </Grid>
          </Route>

          {/* Routes for the pages */}
          <Route path="/theory">
            {/* Component for the "Theory" page */}
            <Theory />
          </Route>
          <Route path="/serpinski">
            {/* Component for the "Sierpinski Triangle" page */}
            <Serpinski />
          </Route>
          <Route path="/mandelbrot">
            {/* Component for the "Mandelbrot Set" page */}
            <Mandelbrot />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

I believe I have imported Switch correctly from react-router-dom, so I'm not sure what the issue is. How can I resolve this error and make my App component work properly with React Router?

I've updated to react-router-dom@6 code using the Routes component instead of Switch, but still have issue rendering.

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link
} from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { Card, CardMedia, CardContent, Typography, Grid } from '@material-ui/core';
import Mandelbrot from './Mandelbrot';
import Serpinski from './Serpinski';
import Theory from './Theory';

// Create styles using Material-UI
const useStyles = makeStyles((theme) => ({
  // ... other styles
}));

const App = () => {
  const classes = useStyles();

  return (
    <Router>
      <div>
        {/* Display the header on all pages */}
        <div className={classes.greeting}>
          <Typography variant="h1">Welcome to the Fractals website!</Typography>
        </div>

        <Routes>
          <Route exact path="/">
            {/* Display the main page with cards */}
            <Grid container justifyContent="center">
              {/* Card for the "Theory" page */}
              <Grid item xs={12} sm={6} md={4}>
                {/* Add a Link component to navigate to the "Theory" page */}
                <Link to="/theory" style={{ textDecoration: 'none' }}>
                  {/* The rest of the card's code remains unchanged */}
                </Link>
              </Grid>

              {/* Other cards are similar */}
              {/* ... */}
            </Grid>
          </Route>

          {/* Routes for the pages */}
          <Route path="/theory">
            {/* The "Theory" page component */}
            <Theory />
          </Route>
          <Route path="/serpinski">
            {/* The "Serpinski Triangle" page component */}
            <Serpinski />
          </Route>
          <Route path="/mandelbrot">
            {/* The "Mandelbrot Set" page component */}
            <Mandelbrot />
          </Route>
        </Routes>
      </div>
    </Router>
  );
};

export default App;

Answer 1

You have react-router-dom@6.11.0 installed but you are importing a Switch component from react-router-dom which is a RRDv5 component export and was replaced in RRDv6 by the Routes component.

You basically have two options:

1. Install the correct version of react-router-dom for the components you want to import and use.

   First uninstall react-router and react-router-dom: npm uninstall --save react-router react-router-dom Install the latest RRDv5 dependency: npm install --save react-router-dom@5

2. Migrate your code to react-router-dom@6.

   Import the Routes component to replace the Switch, and update the Route components to render their content on the element prop as JSX.

   import React from 'react';
   import {
     BrowserRouter as Router,
     Route,
     Routes,
     Link
   } from 'react-router-dom';
   import { makeStyles } from '@material-ui/core/styles';
   import {
     Card,
     CardMedia,
     CardContent,
     Typography,
     Grid
   } from '@material-ui/core';
   import About from './About';
   
   const useStyles = makeStyles((theme) => ({
     // ... other styles
   }));
   
   const App = () => {
     const classes = useStyles();
   
     return (
       <Router>
         <div>
           {/* Displaying the header on all pages */}
           <div className={classes.greeting}>
             <Typography variant="h1">
               Welcome to the Fractals website!
             </Typography>
           </div>
   
           <Routes>
             <Route
               path="/"
               element={(
                 {/* Displaying the home page with cards */}
                 <Grid container justifyContent="center">
                   {/* Card for the "Theory" page */}
                   <Grid item xs={12} sm={6} md={4}>
                     {/* Adding a Link component to navigate
                       to the "Theory" page */}
                     <Link to="/theory" style={{ textDecoration: 'none' }}>
                       {/* Rest of the card code remains the same */}
                     </Link>
                   </Grid>
   
                   {/* Other cards follow the same pattern */}
                   {/* ... */}
                 </Grid>
               )}
             />
   
             {/* Routes for the pages */}
             {/* Component for the "Theory" page */}
             <Route path="/theory" element={<Theory />} />
   
             {/* Component for the "Sierpinski Triangle" page */}
             <Route path="/serpinski" element={<Serpinski />} />
   
             {/* Component for the "Mandelbrot Set" page */}
             <Route path="/mandelbrot" element={<Mandelbrot />} />
           </Routes>
         </div>
       </Router>
     );
   };
   
   export default App;