Unable to render data on webpage

Question

Hi, can you help me figure out what's the issue here: https://stackoverflow.com/questions/74455230/uncaught-error-publicroute-is-not-a-route-component-all-component-children
I'm trying to render <PublicRoute> and </PrivateRoute> components but the webpage is blank, even though there're no errors or warnings.

Answer 1

Which react-router version are you using? V6?

Answer 2

Kelvin Paul yes it's version 6, as mentioned in the problem statement too. This issue has been unresolved for quite a while. I wonder what am I missing in new updates?

Answer 3

Asha
// definition
expert const PrivateRoute = () => {
const [auth, setAuth] = useState(false);
useeffect(()=> {
// check your auth
// Then set setAuth(true|false);
}, []);
return auth ? props.children : <>No access</>
}

//Usage
<Routes>
<Route path={/**/} element={<PrivateRoute><MyRoute/><PrivateRoute>} />
</Routes>

I think this might work