I'm stumped on how to render the signIn component if currentUser is not detected. I am not getting any errors, only that it is rendering an empty component due to the value "currentUser = null".
<Routes>
<Route exact path='/' element={<HomePage />} />
<Route exact path='/shop' element={<ShopPage />} />
<Route exact path='/signIn'
render={() =>
currentUser ?
<Navigate to='/' />
:
<SignIn />
}
/>
<Route exact path='/register' element={<Register />} />
</Routes>
Assuming that currentUser is defined inside the component that is rendering the routes, you would wanna do it this way instead:
// routes
<Routes>
<Route exact path='/' element={<HomePage />} />
<Route exact path='/shop' element={<ShopPage />} />
<Route exact path='/signIn' element ={ <SignIn currentUser={currentUser}/>}/>
<Route exact path='/register' element={<Register />} />
</Routes>
// SignIn
export function SignIn({currentUser}){
if(currentUser){
return <Navigate to ="/"/>
}
return <div>Hello</div>
}