routing problem: my routes on render are not working? - node.js

Question

import Home from "./Pages/home/Home";
import TopBar from "./components/topbar/Topbar.jsx";
import Single from "./Pages/single/Single";
import Write from "./Pages/write/Write";
import Settings from "./Pages/settings/Settings";
import Login from "./Pages/login/Login";
import Register from "./Pages/register/Register";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
const user = true;
return (
<Router>
<TopBar />
<Routes>
<Route exact path="/" component={Home} />
<Route path="/register" component={user ? <Home /> :{Register}} />
<Route path="/login" component={user ? <Home /> : {Login}} />
<Route path="/write" component={user ? <Write /> : {Register}} />
<Route path="/settings" component={user ? <Settings /> : {Register}} />
<Route path="/post/:Id" component={Single} />
</Routes>
</Router>
);
}
export default App;
This is my code but the homepage isnt rendering apart from topbar how do i resolve this. Am not sure if the syntax is correct.

Answer 1

Yeah, the syntax is a little mixed up. In react-router-dom version 6 the Route components render their components on the element prop as JSX, not on any component or render prop as a reference to a React component or function that returns JSX.
function App() {
const user = true;
return (
<Router>
<TopBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/register" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Home /> : <Login />} />
<Route path="/write" element={user ? <Write /> : <Register />} />
<Route path="/settings" element={user ? <Settings /> : <Register />} />
<Route path="/post/:Id" element={<Single />} />
</Routes>
</Router>
);
}