Estoy trabajando en el proyecto reaccionar js. Necesito ocultar el encabezado y el pie de página para algunos componentes específicos. Lo probé con el siguiente fragmento de código en el componente de encabezado.
class Navbar extends Component { state = {} render() { const {user} = this.props; if (window.location.pathname === "/sign-in" || window.location.pathname === "/sign-up" || window.location.pathname === "/vehicles/reservation") return null; return ( <header className="bg-gray-200 sticky z-50 h-20 md:h-auto top-0">...</header>); } }Dado que el método de renderizado se llama solo cuando hay un cambio, la condición anterior no se verifica cada vez. ¿Cómo hago una solución para este problema?
Puede pasar una variable de estado como accesorios del componente principal, para actualizar el componente secundario.
Componente padre:
state = { updateNavbar: false, } //when is necessary update navbar: this.setState(state => ({ updateNavbar: !updateNavbar, })) ... <Navbar updateNavbar={this.state.updateNavbar}>Si desea que React interactúe con la URL, generalmente usa un enrutador. react-router es el popular.