问无法在reactjs中路由到另一个页面

EN

import React from "react";

    const Blank2 = () => {
      return <main id="mainContent">
        <div className="container">
          <div className="row justify-content-center mt-5 p-0">
            <h3>Blank2</h3>
          </div>
        </div>
      </main>
    }
    export default Blank2;

    import React from "react";
    import { Routes ,Route } from 'react-router-dom';
    import "./App.css";
    import NavBar from "./components/NavBar/NavBar";
    import Footer from "./components/Footer/Footer";
    
    import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo";
    
    import Blank1 from "./components/Blank1/Blank1";
    
    import Blank2 from "./components/Blank2/Blank2";
    
    import Blank3 from "./components/Blank3/Blank3";
    
    import image from './image.jpg';
    
    //TODO Web Template Studio: Add routes for your new pages here.
    const App = () => {
        return (
          
          <React.Fragment>
            <NavBar />
            <Routes>
              <Route exact path = "/VolcanoInfo" component = { VolcanoInfo } />
              <Route path = "/Blank1" component = { Blank1 } />
              <Route path = "/Blank2" component = { Blank2 } />
              <Route path = "/Blank3" component = { Blank3 } />
            </Routes>
            <Footer />
          </React.Fragment>
        );
    }
    
    <header className="App-header">
      <img src={image} className="image" alt="image" />
    </header>
    
    
    export default App;