Estoy tratando de deshabilitar mis componentes de Header y pie de Footer en mi página de Product . Aquí está mi código:
const HeaderRoute = useCallback( () => !["/create", "/sign-up", "/sign-in", "/product"].includes( window.location.pathname ) && <Header />, [] ); Sin embargo, la URL de mi componente de Product contiene :id o path="/product/:id" personalizados:
<Route exact path="/product/:id" component={Product} /> El encabezado no se muestra en las otras URL, pero sí en la URL /product:id por algún motivo. ¿Alguna idea de por qué?
El método includes búsquedas de coincidencias exactas, por lo que ['/product'].includes('product') es falso.
Si desea ver si una cadena coincide dentro de otra, puede usar match .
Su condición será como:
const HeaderRoute = useCallback( () => !["/create", "/sign-up", "/sign-in", "/product"].some(path => window.location.pathname.match(path) ) && <Header />, [] ); function showHeader(pathname) { return !["/create", "/sign-up", "/sign-in", "/product"].some(path => pathname.match(path)); } console.log(showHeader("/product:id")); // false console.log(showHeader("/create")); //false console.log(showHeader("/create/new:id")); //false console.log(showHeader("/anotherPage")); //true