Obtener error: Guardia (...): No se devolvió nada del renderizado. Esto generalmente significa que falta una declaración de devolución.
Quiero llamar a la API en mi componente de protección antes de devolver el elemento a Elemento de ruta para verificar si el usuario que inició sesión tiene acceso a una ruta específica o no.
Para eso, he implementado una guardia. Aquí está el código del archivo de ruta.
export default function Router() { return ( <Routes> <Route path="organizations"> <Route path="list" element={<Guard><ListOrganization /></Guard>} /> </Routes > ); }Código de componente de protección
const Guard = (props) => { fetch('https://apiToCheckPermission.com') .then(response => { if (response.isPermission) { return props.children; } }) }; export default Guard;Es algo así como que quiero implementar un elemento de ruta asíncrona. Pero React arroja un error si no devuelvo inmediatamente el elemento de Guard.
¿Alguien puede decir cómo resolver este error?
Intente definir un estado para manejar el permiso y useEffect para cargar los datos:
const Guard = (props) => { const [hasPermission, setHasPermission] = useState(false); useEffect(async () => { const response = await fetch('https://apiToCheckPermission.com'); setHasPermission(response.isPermission); }, []); if (!hasPermission) return <>Unauthorized</>; return props.children; }; export default Guard;Si se supone que Guard es un componente de React, entonces siempre debe devolver un JSX válido. La Guard actualmente no devuelve nada. Es decir, necesitaría devolver algo de la cadena Promise y luego devolverlo desde el cuerpo de la función.
Para resolver, use algún estado local para mantener un valor de permiso confirmado/verificado y representar condicionalmente a children elementos secundarios o una alternativa. Una implementación típica de protección de ruta esperará para confirmar el acceso de un usuario y luego representará a los children o redirigirá a la página de inicio de sesión con la ubicación a la que se accede para que el usuario pueda ser redirigido después de la autenticación.
Ejemplo:
const Guard = ({ children }) => { const location = useLocation(); const [hasPermission, setHasPermission] = React.useState(); // <-- initially undefined React.useEffect(() => { ); fetch('https://apiToCheckPermission.com') .then(response => { setHasPermission(response.isPermission); }); }, []); if (hasPermission === undefined) { return null; // or loading indicator, spinner, etc } return hasPermission ? children : <Navigate to="/login" replace state={{ from: location }} />; };