Estoy usando next js en mi proyecto cuando obtengo de mi servidor usando usewr hook, entonces hay ciertas condiciones para regresar a la página, por ejemplo
import InnerNavbar from "../components/InnerNavbar"; import DashboardLoadingSkeleton from "../components/DashboardLoadingSkeleton"; import DashBoardData from "../components/DashBoardData"; import useSWR, { mutate } from "swr"; const fetcher = async () => await fetch(`${process.env.NEXT_PUBLIC_URL}/fetchchallenges`, { method: "POST", credentials: 'include' }).then((res) => res.json()); const dashboard = () => { const { data, error } = useSWR("/dashboard", fetcher, { dedupingInterval: 40000 }); if (!data) { if (!data.Errors) { return (<><InnerNavbar /><DashBoardData data={data} mutate={mutate} /></>); } else if (data.Errors === "Not Approved") { return (<>{location.replace('/notapproved')} <center><h1>Not Approved By Admin</h1></center></>) }else { return (<>{location.replace('/logout')} <center><h1>Redirecting...</h1></center></>) } } else { return ( <> <InnerNavbar /> <DashboardLoadingSkeleton /> </> ) } }; export default dashboard;ahora quiero necesitar esta misma declaración condicional en varias páginas para regresar, pero no sé cómo crear una función separada para eso.
Creo que puedes usar reaccionar Componentes de orden superior
aquí hay algo que hice:
import useSWR, { mutate } from "swr"; const fetcher = async () => await fetch(`${process.env.NEXT_PUBLIC_URL}/fetchchallenges`, { method: "POST", credentials: 'include' }).then((res) => res.json()); const withSwrData = ({Component,endpoint}) => { const { data, error } = useSWR(endpoint, fetcher, { dedupingInterval: 40000 }); if (!data) { if (!data.Errors) { return (<Component data={data} mutate={mutate} />); } else if (data.Errors === "Not Approved") { return (<>{location.replace('/notapproved')} <center><h1>Not Approved By Admin</h1></center></>) }else { return (<>{location.replace('/logout')} <center><h1>Redirecting...</h1></center></>) } } else { return ( <> <Component /> </> ) } }; export default withSwrData;y utilícelo en el tablero de esta manera:
import InnerNavbar from "../components/InnerNavbar"; import DashboardLoadingSkeleton from "../components/DashboardLoadingSkeleton"; import DashBoardData from "../components/DashBoardData"; import withSwrData from "../withSwrData" const dashboard = ({data,mutate}) => { return (<> <InnerNavbar /> {data ? <DashBoardData data={data} mutate={mutate} /> : <DashboardLoadingSkeleton /> } </>) }; export default withSwrData(dashboard,"/dashboard");