I am trying to render a specific Layout if the location change and I'm using the useMemo hook to validate the route and render the based on this value but it always returns true even the route change for example the new route is .../SSDSD/draft
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>
);
}
The problem is that you include "/" in the array. location.pathname always begins with a "/", so this will always be true.
const result = ['/', 'any string', 'any other string', 'doesnt matter'].some(str => location.pathname.includes(str));
console.log(result); // always trueInstead, you probably want to include all pathnames which actually represent your "homepage" and use str.startsWith instead of str.includes, using something like this:
const isHomePage = useMemo(() => (
location.pathname === '/'
|| ['/search', '/addressbook'].some(str => location.pathname.startsWith(str))
), [location]);