Блог

Я создаю веб-приложение в react js и следую этим руководствам: https://www.youtube.com/watch?v=PKwu15ldZ7kamp;t=2002s может ли кто-нибудь объяснить мне этот фрагмент кода?

 return currentUser ? <Outlet /> : <Navigate to="/login" />;
 

Я понимаю, что если CurrentUser имеет значение null, то он перенаправляется на login . Есть ли способ заставить его возвращать другую страницу, если не null?

Этот фрагмент кода return currentUser ? <Outlet /> : <Navigate to="/login" />; называется троичным оператором. Другими словами, если CurrentUser имеет значение true, то верните компонент Outlet, в противном случае верните компонент Navigate. Это сокращенный способ написания оператора if / else .

Вот больше о троичных операторах: MDN Web Docs: троичный оператор

Если вы хотите, чтобы он перенаправлял на другой URL-адрес, когда он возвращает компонент Navigate, вы просто изменили /login его на любой URL-адрес, который хотите загрузить в null /someOtherURL

По сути, это однострочный оператор if . Он гласит:

 if (currentUser) { // If currentUser is different than undefined/null/false
  return <Outlet />
} else {
  return <Navigate to="/login" />
}
 

На этом этапе вы можете выбрать возврат чего угодно в любом случае. Вы можете перенаправить на любую имеющуюся у вас страницу, вы можете вернуть любые другие компоненты и т.д.