React Router Dom v6 not working in my React page-CodePudding

This is my app.js I'm trying to preview the code but it's showing a blank page like extremely blank not even with an error while on my terminal it says compiled successfully!

import TopBar from './components/topbar/TopBar';
import Home from './pages/home/home';
import Write from './pages/write';
import Single from './pages/single';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
  return (
    <>
    <Router>
      <TopBar/>
      <Routes>
         <Route exact path ="/" element = {Home} />      
         <Route path ="/write" element = {Write} />
         <Route path ="/single" element = {Single} />
    
      </Routes>
   
    </Router>
    
    </>
  );
}

export default App;

CodePudding user response：

With React Router Dom v6 you should be calling the given component to element property, like so:

<Route exact path ="/" element = {<Home/>} />      
<Route path ="/write" element = {<Write/>} />
<Route path ="/single" element = {<Single/>} />

CodePudding user response：

Check your browser console to see more details.

but as far as i know in version 6 there is no exact in <Route/> props remove it

CodePudding user response：

try removing exact and using child routers I think that would help

 function App() {
    return (
      <>
        <Router>
          <TopBar />
          <Routes>
            <Route path="/" element={Home}>
              <Route path="write" element={Write} />
              <Route path="single" element={Single} />
            </Route>
          </Routes>
        </Router>
      </>
    );
  }