Fix router

src/components/Protected/index.tsx

@@ -0,0 +1,19 @@
+import { useReactiveVar } from '@apollo/client';
+import { Navigate } from 'react-router-dom';
+import { tokenVar } from '../../graphql/state';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Protected = ({ children }: Props) => {
+  const token = useReactiveVar(tokenVar);
+
+  return (
+    <>
+      {token ? children : <Navigate to='/login' />}
+    </>
+  );
+};
+
+export default Protected;

src/components/ProtectedRoute/index.tsx

@@ -1,13 +0,0 @@
-import { useReactiveVar } from '@apollo/client';
-import { Navigate, Route, RouteProps } from 'react-router-dom';
-import { tokenVar } from '../../graphql/state';
-
-const ProtectedRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
-  const token = useReactiveVar(tokenVar);
-
-  return (
-    <Route {...rest} element={token ? children : <Navigate to='/login' />} />
-  );
-};
-
-export default ProtectedRoute;

src/components/Public/index.tsx

@@ -0,0 +1,19 @@
+import { useReactiveVar } from '@apollo/client';
+import { Navigate } from 'react-router-dom';
+import { tokenVar } from '../../graphql/state';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Public = ({ children }: Props) => {
+  const token = useReactiveVar(tokenVar);
+
+  return (
+    <>
+      {!token ? children : <Navigate to='/' />}
+    </>
+  );
+};
+
+export default Public;

src/components/PublicRoute/index.tsx

@@ -1,11 +0,0 @@
-import { useReactiveVar } from '@apollo/client';
-import { Navigate, Route, RouteProps } from 'react-router-dom';
-import { tokenVar } from '../../graphql/state';
-
-const PublicRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
-  const token = useReactiveVar(tokenVar);
-
-  return <Route {...rest} element={!token ? children : <Navigate to='/' />} />;
-};
-
-export default PublicRoute;

src/components/index.tsx

@@ -15,8 +15,8 @@ import CheckBox from './CheckBox';
 import Menu from './Menu';
 import Navbar from './Navbar';
 import Sidebar from './Sidebar';
-import ProtectedRoute from './ProtectedRoute';
-import PublicRoute from './PublicRoute';
+import Protected from './Protected';
+import Public from './Public';
 import SectionSelector from './SectionSelector';
 import Modal from './Modal';
 import SidebarItem from './SidebarItem';
@@ -48,8 +48,8 @@ export {
   CheckBox,
   Navbar,
   Sidebar,
-  ProtectedRoute,
-  PublicRoute,
+  Protected,
+  Public,
   SectionSelector,
   Modal,
   SidebarItem,