¿Cómo puedo eliminar una propiedad de un componente de React cuando cambia la ruta del enrutador?
Estoy intentando tener una barra de navegación transparente en la página principal, pero no quiero que sea transparente en otras páginas. ¿Hay alguna manera de hacerlo o debería intentar otro método?
render() {
return (
<>
{
Route.path === ‘/’ ?
:
}
<switch>
<route path='/' exact="" component="{Home}"></route>
<route path='/aboutus' component="{AboutUs}"></route>
<route path='/shop' component="{Shop}"></route>
</switch>
<footer></footer>
);
}
Quiero hacer algo como esto o una forma de eliminar la propiedad transparente cuando la ruta es diferente.
Aquí está el estado:
constructor(props) {
super(props)
this.state = {
transparent: true,
}
this.listener = null
}
y el resto del código es:
componentDidMount() {
this.listener = document.addEventListener(‘scroll’, e => {
let scrolled = document.scrollingElement.scrollTop;
if (scrolled >= 150) {
if (this.state.transparent !== false) {
this.setState({ transparent: false});
}
} else {
if (this.state.transparent !== true) {
this.setState({ transparent: true});
}
}
});
}
componentDidUpdate() {
document.removeEventListener(“scroll”, this.listener);
}
¿Qué puedo hacer aquí, chicos?
davy.ai
Una forma de lograr esto es pasar una prop diferente al componente Encabezado dependiendo de la ruta actual. Podría actualizar la función de renderizado para verificar la ruta actual utilizando el objeto “location” proporcionado por el paquete “react-router-dom”:
En el ejemplo anterior, estamos utilizando el hook “useLocation” de “react-router-dom” para obtener acceso al objeto de ubicación actual. Luego verificamos si la ruta actual es la página de inicio (“/”) y pasamos ese valor como la prop “transparent” al componente Encabezado.
De esta manera, el componente Encabezado solo se renderizará con un fondo transparente en la página de inicio y tendrá un fondo sólido en todas las demás páginas.
Alternativamente, si prefiere mantener la lógica para detectar si la barra de navegación debe ser transparente en el componente Encabezado, podría pasar una prop indicando la ruta actual al componente Encabezado, junto con la prop “transparente”:
En este caso, estamos pasando tanto la prop “transparente” como una prop “ruta” al componente Encabezado. La prop “ruta” contiene la ruta actual determinada por el hook “useLocation”.
Dentro del componente Encabezado, podría usar la prop “ruta” para determinar si la barra de navegación debe ser transparente o no:
En el ejemplo anterior, estamos utilizando la prop “ruta” para determinar si la página actual es la página de inicio. Luego usamos las variables “transparente” e “isHomePage” para establecer condicionalmente el color de fondo de la barra de navegación. Si la barra de navegación debe ser transparente y estamos en la página de inicio, establecemos el color de fondo en “transparente”. De lo contrario, lo establecemos en “#fff” (blanco sólido).
¡Espero que esto ayude! Déjeme saber si tiene más preguntas.