Having problem in wrapping custom hooks with React component
This is my code:-
const App = () => {
return (
<Router>
<Routes>
<Route element={<RoomGuard />}>
<Route
path="profiles"
element={
<AuthGuard>
<LoggedInUser>
<Profiles />
</LoggedInUser>
</AuthGuard>
}
></Routes>
</Route>
</Routes>
</Suspense>
</Router>
</Provider>
);
};
export default App;
this is roomGuard component:-
import React, { useEffect, useMemo } from 'react'
import { io } from "socket.io-client";
const RoomGuard = ({children}) => {
const socket = useMemo(() => io("http://localhost:5000"), []);
useEffect(()=>{
return () => {
socket.disconnect();
};
},[])
return (
<div>
{React.Children.map(children, child => {
return React.cloneElement(child, { socket });
})}
</div>
)
}
export default RoomGuard
what I am trying to do is make a custom component that generate the socket and pass it to all component so that every component can use the socket but somehow it is not working.
WHen I go to the path mention in url of router, the compoent doesn't render what is issue here
0 Replies