将react-route-dom中的语法从“Switch”更改为“Routes”，但浏览器中仍然没有显示

我正在创建一个 Google 克隆。这是我当前的代码。我读到，考虑到反应路由器的更新，我需要将语法从“Switch”更改为“Routes”。我这样做了，但我的“这是搜索页面”没有显示在浏览器内部。

import React from "react";
import './App.css';
import Home from './pages/Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"


function App() {
  return (
    // BEM
    <div className="app">
      <Router>

        <Routes>
        <Route path="/search">
          <h1>This is the search page</h1>
        </Route>
        <Route path="/">
          <Home />
        </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

您需要分别创建每个组件，如下所示：

 import React from 'react; 

function Home(){
     return(

       <div>
        <h1>Home</h1>
       </div>

           );
         }

  export default Home;




 import React from 'react; 
 function Search(){

   return(

    <div>
       <h1>Search</h1>
    </div>
  );

  }

  export default Search;

将index.js更改为：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';



 ReactDOM.render(<App />, document.getElementById("root"));

将 App.js 更改为

 import React, {useEffect} from 'react';
 import ReactDOM from "react-dom";
 import { BrowserRouter ,Routes,Route} from 'react-router-dom';

 import Search from '.........'
 import Home from '.......' 


 function App(){
 return(
  <BrowserRouter>
    <Routes>
     <Route exact path="/" element={<Home/>} />
     <Route path="/search" element={<Search/>} />

     <Routes>


  </BrowserRouter>

  );

 }


 export default App;



 if(document.getElementById('app')){

  ReactDOM.render(<App/>,document.getElementById('app'));

 }