React router v6 - Route render - navigate if signed in

Question

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>

Answer 1

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>
}