why is my router not working in react

Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.

app.js 
 
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        
      </Routes>
    </div>
  );
}

export default App;

Home.js

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

index.js

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";


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

CodePudding user response：

Try using Switch instead of Routes and you also don't have to use triangular brackets in element

import Home from './components/Home';
import { Route, Switch } from 'react-router';

<Switch>
  <Route path="/" element={Home} />       
</Switch>

CodePudding user response：

If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />