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;
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/>} />
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
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>
</>
);
}