Javascript React Router App 组件中的模糊间接导出：switch 错误

我正在使用Reaction路由构建一个Reaction应用程序，并且在我的应用程序组件中收到错误"歧义间接导出:switch ".以下是我的代码:

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;

我相信我已经正确地从react-router-dom导入了Switch，所以我不确定是什么问题.如何解决此错误并使我的应用程序组件与Reaction路由一起正常工作？

我已经更新了使用Routes组件而不是Switch组件的react-router-dom@6代码，但仍然存在呈现问题.

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;