My Screen is black and React-Router is Not Working , I am stuck in between , Browser is not showing anything

user_19257528 0
Viewed 34

Uncaught Error: [Homepage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Can someone tell me what is wrong exactly.?! i am trying to output my website but i am unable to do so.I am getting blank screen , Please help me !

HomePage.jsx

import { useLocation } from "react-router";
import Header from "../../components/header/Header";
import Posts from "../../components/posts/Posts";
import Sidebar from "../../components/sidebar/Sidebar";
import "./homepage.css";
import React from 'react'
// import ReactDOM from 'react-dom'

export default function Homepage() {
  const location = useLocation();
  console.log(location);
  return (
    <>
      <Header />
      <div className="home">
        <Posts />
        <Sidebar />
      </div>
    </>
  );
}

App.js

import React from 'react';
import Single from "./pages/single/Single";
import Write from "./pages/write/Write";
import Settings from "./pages/settings/Settings";
import Topbar from "./components/topbar/Topbar";
import Homepage from "./pages/homepage/Homepage";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import {  Routes, Route } from "react-router-dom";

function App() {
  const currentUser = true;
  return (
   
    // {/* //Router k andar dala jata hn  */}
    // {/* Topbar me no changing ya switching */}
    <>
      <Topbar />
      <Routes>
      {/* //exact likhne se exactly wo likhne pe hi work krega */}
   
        <Route exact path="/"
          element={Homepage }
        />
        <Route path="/posts">
          <Homepage />
        </Route>
        <Route path="/register">
          {currentUser ? <Homepage /> : <Register />}
        </Route>
        <Route path="/login">{currentUser ? <Homepage /> : <Login />}</Route>
        <Route path="/post/:id">
          <Single />
        </Route>
        <Route path="/write">{currentUser ? <Write /> : <Login />}</Route>
        <Route path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>
      </Routes>
    </>
  );
}
export default App;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
);

Please Help me , Following codes are of index.js , App.js and HomePage.jsx. The above error is showing..

react-router reactjs
1 Answers

The Route components render their content on the element prop as a ReactNode, a.k.a. JSX. The only valid children of a Route component is another nested Route component.

Move the children onto the element prop.

<Routes>
  <Route path="/" element={<Homepage /> } />
  <Route path="/posts" element={<Homepage />} />
  <Route
    path="/register"
    element={currentUser ? <Homepage /> : <Register />}
  />
  <Route
    path="/login"
    element={currentUser ? <Homepage /> : <Login />}
  />
  <Route path="/post/:id" element={<Single />} />
  <Route
    path="/write"
    element={currentUser ? <Write /> : <Login />}
  />
  <Route
    path="/settings"
    element={currentUser ? <Settings /> : <Login />}
  />
</Routes>

Protecting routes is common enough you will want to abstract the currentUser check into a layout route that renders an Outlet for nested routes you want to protect.

Example:

import { Navigate, Outlet } from 'react-router-dom';

const AuthLayout = ({ currentUser }) => {
  if (currentUser === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return currentUser
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

const AnonymousLayout = ({ currentUser }) => {
  if (currentUser === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return currentUser
    ? <Navigate to="/" replace />
    : <Outlet />;
};

...

<Routes>
  <Route path="/" element={<Homepage /> } />
  <Route path="/posts" element={<Homepage />} />
  <Route path="/post/:id" element={<Single />} />

  <Route element={<AnonymousLayout currentUser={currentUser} />}>
    <Route path="/register" element={<Register />} />
    <Route path="/login" element={<Login />} />
  </Route>

  <Route element={<AuthLayout currentUser={currentUser} />}>
    <Route path="/write" element={<Write />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
</Routes>
user_86908570
Related