Route w react

Question

Cześć, piszę aplikację internetową która ma kilka ról i w zależności od niej wyświetla się inna strona. Chciałem zapytać czy da się w react pod jednym path umieścić kilka elemementów w zależności od tego który użytkownik jest zalogowany. Obecnie wygląda to średnio: 

          <Route path="/animals" element={<Animal/>}/>
          <Route path="/loggedAnimals" element={<LoggedAnimal/>}/>

Animal to strona dla admina z wieloma opcjami natowiast LoggedAnimal jest dla zalogowanego usera i jest okrojona. Czy da się zrobić jakiegoś ifa który przyporządkuje pod endpoint odpowiedni element w zależności od tego jaki user jest zalogowany? Jestem całkowicie zielony w froncie.

Chciałbym osiągnąć coś takiego:

          <Route path="/animals" element={
          if(user.roles.includes("ROLE_MODERATOR")){<Animal/>}
          else{<LoggedAnimal/>}
          }
          />

Z góry dzięki za odpowiedź 

Answer 1

Tu masz fajny przykład:

https://stackoverflow.com/questions/48497510/simple-conditional-routing-in-reactjs#:~:text=To%20help%20answer%20your%20question

Comments

Szczerze mało mi to rozjaśniło, widzę że tam jest przykład dla if else. Co jeżeli mam trzy przypadki? Dla if else poradziłem sobie tak: 

<Route path="/animals" element={
          currentUserRole.roles.includes("ROLE_ADMIN") ? <Animal/> : <LoggedAnimal/>
          }
          />

nie rozumiem dlaczego nie mogę zrobić po prostu ifa w elemencie

 

EDIT

Dla potomnych. Poradziłem sobie w taki sposób

<Route path="/animals" element={currentUserRole === null ? <UnloggedAnimal/> :  
          currentUserRole.roles.includes("ROLE_ADMIN") ? <Animal/>  : <LoggedAnimal/>
          }
          />

Dzięki za pomoc! :)