Realmente nuevo para reaccionar, tengo esta parte de la navegación en mi Navbar.js usando el enlace useLocation de react-router-dom , puedo obtener la ruta activa que tengo para las vistas y quiero mostrar texto personalizado cuando un usuario llega a la ver con JSX algo así como
if(path==="login" || path==="signin"){ `<h1>welcome</h1> ${userName}!` } ¿Cómo puedo verificar si se cumple la condición A o B y luego mostrar el texto apropiado usando jsx
Debe decir explícitamente qué devolver, en su ejemplo no devuelve nada. Entonces, puedes hacer cualquiera de las dos cosas:
if (path === "login" || path === "signin") { return ( <> <h1>welcome</h1> {userName} </> ); } else { return null; } O use el operador && para renderizar condicionalmente.
{ (path === "login" || path === "signin") && ( <> <h1>welcome</h1> {username} </> ); }Lea más sobre el renderizado condicional [aquí]
Necesitas:
Tal:
if(path==="login" || path==="signin") { return <> <h1>Welcome</h1> {userName}! </>; } … pero esa lógica probablemente debería ser manejada por sus rutas en lugar de una declaración if .
Puede usar el operador ternario para la representación condicional en JSX como
{path==="login" || path==="signin" ? <> <h1>welcome</h1> {userName} </> : null}Simple :-)