Public route component not rendering element

Question

I have this Router component which has a few routes defined:

import { Routes, Route } from 'react-router-dom';
import PublicRoute from './utils/PublicRoute';
import { PATHS, AUTH_PATHS } from './routes';
import Home from './views/Home';
import SignUp from './views/Auth/SignUp';
import SignIn from './views/Auth/SignIn';

const Router = () => {
  return (
    <Routes>
      <Route path={PATHS.HOME} element={<Home />} />
      <Route
        path={AUTH_PATHS.REGISTER}
        element={
          <PublicRoute element={<SignUp />} path={AUTH_PATHS.REGISTER} />
        }
      />
      <Route
        path={AUTH_PATHS.LOGIN}
        element={<PublicRoute element={<SignIn />} path={AUTH_PATHS.LOGIN} />}
      />
    </Routes>
  );
};

export default Router;

I also have this PublicRoute component which is designed to prevent logged in users to access login/register routes:

import { Navigate, Route, RouteProps, Routes } from 'react-router-dom';
import { PATHS } from '../routes';

const PublicRoute = ({ element, path, ...rest }: RouteProps) => {
  if (localStorage.getItem('token')) {
    return (
      <Routes>
        <Route path={path} element={<Navigate to={PATHS.HOME} replace />} />
      </Routes>
    );
  }

  return (
    <Routes>
      <Route path={path} element={element} {...rest} />
    </Routes>
  );
};

export default PublicRoute;

The problem that I am having now is when I try to access /login or /register I am not getting anything rendered, the page is simply empty except for my header of course since it's always there, I tried logging the props inside the PublicRoute and they are passed correctly, but I am not sure why my component doesn't render from the PublicRoute component.

Public route component not rendering element

0 Answers0