const MenuItem = ({ to, title, icon, seletedPaths }) => { const { pathname } = useLocation(); const selected = (seletedPaths || [to]).some(path => matchPath(pathname, {path: path, exact: true})) return ( <ListItem button to={to} component={Link} selected={selected}> <ListItemIcon> {icon} </ListItemIcon> <ListItemText primary={title} /> </ListItem> ) }
const NavBar = ({ onMobileClose, openMobile }) => { const classes = useStyles(); const location = useLocation();
function useQuery(keys) { const urlQuery = new URLSearchParams(useLocation().search); const result = {}; keys.forEach(k => { result[k] = urlQuery.get(k); }); return result; }
function Layout({children}) { const {pathname} = useLocation(); return ( <S.AppLayout pathname={pathname}> <Header /> <S.Main>{children}</S.Main> <Footer /> </S.AppLayout> ); }
export default function NotFound() { const location = useLocation(); return ( <Flexbox alignItems='center' flexDirection='column'> <S.ErrorCode>404</S.ErrorCode> <S.Text> No match for <code>{location.pathname}</code> </S.Text> <ButtonSecondary as={Link} to='/'>Back home</ButtonSecondary> </Flexbox> ); }
const useQueryParam = (paramName, defaultName) => { const query = new URLSearchParams(useQuery()); const param = query.get(paramName) || defaultName; function useQuery() { return new URLSearchParams(useLocation().search); } return param }
function BottomNavigation() { const location = useLocation(); return ( <Container> <NavigationLink to="/" active={location.pathname === "/"}> Wishlist </NavigationLink> <NavigationLink to="/new" active={location.pathname === "/new"}> Add </NavigationLink> </Container> ); }
function NoMatch() { let location = useLocation(); return ( <div> <h3> No match for <code>{location.pathname}</code> </h3> </div> ); }
const GuestRoute = ({ children, ...rest }) => { const location = useLocation(); const isAuth = useSelector(isAuthenticated); return ( <Route {...rest}> { isAuth ? ( <Redirect to={{ pathname: '/', state: { from: location } }} /> ) : children } </Route> ); }
export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }
// A custom hook that builds on useLocation to parse the query string function useQuery() { return new URLSearchParams(useLocation().search); }
export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }
const PrivateRoute = ({ children, ...rest }) => { const location = useLocation(); const isAuth = useSelector(isAuthenticated); return ( <Route {...rest}> { isAuth ? children : ( <Redirect to={{ pathname: '/auth/login', state: { from: location } }} /> )} </Route> ); }
function useQuery() { return new URLSearchParams(useLocation().search); }
// A custom hook that builds on useLocation to parse the query string function useQuery() { return new URLSearchParams(useLocation().search); }