Estoy tratando de representar un diseño específico si la ubicación cambia y estoy usando el enlace useMemo para validar la ruta y representarla en función de este valor, pero siempre devuelve verdadero, incluso el cambio de ruta, por ejemplo, la nueva ruta es .../ SSDSD/borrador
const location = useLocation(); console.log(location) const showShadow = useMemo(() => ['preview', 'signing', 'receipts'].some(word => location.pathname.includes(word)), [location]); const isHomePage = useMemo(() => ['/', '/search', '/addressbook'].some(word => location.pathname.includes(word)), [location]); console.log(isHomePage); //debugger; return ( <ThemeProvider theme={theme}> <Box className={isHomePage ? classes.homeBackground : classes.innerBackground}> </Box> </ThemeProvider> ); }El problema es que incluye "/" en la matriz. location.pathname siempre comienza con "/" , por lo que siempre será cierto.
const result = ['/', 'any string', 'any other string', 'doesnt matter'].some(str => location.pathname.includes(str)); console.log(result); // always true En su lugar, probablemente desee incluir todos los nombres de ruta que realmente representan su "página de inicio" y usar str.startsWith en lugar de str.includes , usando algo como esto:
const isHomePage = useMemo(() => ( location.pathname === '/' || ['/search', '/addressbook'].some(str => location.pathname.startsWith(str)) ), [location]);