Estoy intentando mostrar la barra de búsqueda en otra página que no sea de inicio de sesión.
Este archivo App.js.... En principal utilicé diferentes componentes según las necesidades de la página.
useEffect(() => {
if (userInfo && userInfo.isAdmin) {
setShowSearchBar(false);
} else {
setShowSearchBar(true);
}
// location.pathname === '/signin' && setShowSearchBar(false);
}, [userInfo]);
a cambio()
<header>
<Logo />
{showSerachBar && <SearchBox />}
<div className="menu">
<Link className="menu__item link" to="/cart">
<Cart2 size="24" />
{cartItems.length > 0 && (
<span className="badge">{cartItems.length}</span>
)}
</Link>
</div>
</header>
<main></main>
Quiero mostrar la barra de búsqueda a los usuarios, como usuarios registrados que no sean administradores y usuarios no registrados, es decir, invitados, y también quiero ocultar el componente de la barra de búsqueda cuando el usuario está en la página de inicio de sesión o en la página de registro. Aquí el código oculta el componente de la barra de búsqueda cuando el usuario es administrador. Pero en la página de inicio de sesión, la barra de búsqueda no está oculta. Como hacer eso. Si uso una declaración condicional para hacer eso como se muestra a continuación
window.location.pathname === '/signin' ? setShowSearchBar(false) :
setShowSearchBar(true);
No funciona. Cuando reviso window.location.pathname === '/signin' en la consola del navegador, me da la respuesta correcta, pero cuando implemento esto en el nivel de código, no funciona.
Si mostrar la barra de búsqueda se basa únicamente en la información del usuario, no necesita ningún estado. Utilice userInfo directamente: { userInfo?.isAdmin && <Cuadro de búsqueda /> }.
-rayo
19/03/2021 a las 16:27
` ventana.ubicación.nombreruta = '/iniciar' ` uso ===
- Ruslan Semenov
19/03/2021 a las 16:36
@RuslanSemenov Lo siento. Es un error tipográfico. Al escribir el código en cuestión, ahora lo edité. Pero no funciona
- Sowmiya
19/03/2021 a las 16:44
@rayhatfield En algunos casos, la información de usuario es nula. Por eso lo usé así
- Sowmiya
19/03/2021 a las 16:46
Creo que no entiendes lo que quiero decir sobre no usar el estado.
-rayo
19/03/2021 a las 17:50
------------------------------------
Primero uso === allí window.location.pathname = '/signin'
Adn, puedes usar la documentación de ubicación
let location = useLocation();
useEffect(() => {
location.pathname === '/signin' && setShowSerachBar(false);
}, [location]);
2
recibió un error...TypeError: No se puede leer la propiedad 'ubicación' de indefinido
- Sowmiya
19/03/2021 a las 16:52
El error se resuelve moviendo <BrowserRouter> a index.js. y puse <App /> entre <BrowserRouter> etiqueta. Y ahora está funcionando. El componente searchBar está oculto cuando la ruta es "/signin"
- Sowmiya
21 de marzo de 2021 a las 9:22
------------------------------------
Nunca debes poner el conjunto de estados setShowSearchBar en la parte de renderizado de la aplicación. Porque eso activa otro renderizado, y así sucesivamente.
Si desea redirigir al usuario a /signin, debe hacerlo dentro de useEffect para sus datos de información de usuario. Y luego en el render decide si quieres mostrar SearchBox
useEffect(() => {
setShowSerachBar(userInfo.isAdmin);
}, [userInfo.isAdmin]);
return {showSerachBar && <SearchBox />}
6
Hola señor, está funcionando pero se muestra en la página de inicio de sesión. Quiero ocultar el componente SearchBar en la página de inicio de sesión. El componente de la barra de búsqueda se coloca en el componente del encabezado. Por eso quiero ocultar eso en la página de inicio de sesión.
- Sowmiya
19/03/2021 a las 16:41
Bueno, en ese caso, si tienes algún estado que necesitas compartir entre páginas, debes usar el contexto para compartir ese valor. Publique el código de sus componentes para que podamos tener una idea de lo que quiere hacer
-Mario Petrovic
19/03/2021 a las 17:10
Es el componente de encabezado... useEffect(() => { if (userInfo && userInfo.isAdmin) { setShowSearchBar(false); } else { setShowSearchBar(true); }// ubicación .pathname === '/signin' && setShowSearchBar(false); }, [userInfo]); return(<> <Logotipo /> {showSerachBar && <SearchBox />} <div lassName="menú"> <Link className="menu__item link" to=" /cart"><Tamaño del carrito2="24" />{cartItems.length > 0 && (<span className="insignia">{cartItems.length}</span> )}</Enlace></div></> )
- cerdaiya
19/03/2021 a las 17:38
¿Puedes editar el código de tu pregunta y darle un buen formato?
-Mario Petrovic
19/03/2021 a las 18:11
Señor, cambié de pregunta.
- Sowmiya
19/03/2021 a las 18:18
