routing problem: my routes on render are not working?

user_17690738 0
Viewed 90
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.

react-router-dom reactjs node.js routes navigation
1 Answers

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>
  );
}
user_86908570
Related