i had previously built an app using the old way of react router in this way
App.jsx
<code>if(auth){
return <AppProtectedRoutes/>
}
return <AppUnprotectedRoutes/>
</code>
<code>if(auth){
return <AppProtectedRoutes/>
}
return <AppUnprotectedRoutes/>
</code>
if(auth){
return <AppProtectedRoutes/>
}
return <AppUnprotectedRoutes/>
AppProtectedRoutes
<code><Routes>
<Route path='/' element/>
<Route path='/dashboard' element/>
<Routes>
</code>
<code><Routes>
<Route path='/' element/>
<Route path='/dashboard' element/>
<Routes>
</code>
<Routes>
<Route path='/' element/>
<Route path='/dashboard' element/>
<Routes>
AppUnprotectedRoutes
<code><Routes>
<Route path='/login' element/>
<Route path='/signup' element />
<Route path='/onboard' element />
<Routes>
</code>
<code><Routes>
<Route path='/login' element/>
<Route path='/signup' element />
<Route path='/onboard' element />
<Routes>
</code>
<Routes>
<Route path='/login' element/>
<Route path='/signup' element />
<Route path='/onboard' element />
<Routes>
How do I convert these to the RouteObject so that authenticated users can only access Protected only and unauthenticated users can access Unprotected only?
Also since RouteProvider would be in the index.js file, what should App.js contain other than the main logic?