react-router-dom#useLocation JavaScript Examples

Breadcrumbs = ({ current }) => {
  const intl = useIntl();
  const location = useLocation();
  const splitUrl = location.pathname.split('/');

  return (
    <div>
      <Breadcrumb ouiaId="detail">
        <BreadcrumbItem className="breadcrumb-item">
          <Link to={`/${splitUrl[1]}`}>
            {`${intl.formatMessage(messages.insightsHeader)} ${splitUrl[1]}`}
          </Link>
        </BreadcrumbItem>
        <BreadcrumbItem className="breadcrumb-item" isActive>
          {current}
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

Authentication = ({ children }) => {
  const queryClient = useQueryClient();
  const location = useLocation();

  const { isLoading, isFetching, isSuccess, isError } = useUser();

  useEffect(() => {
    isSuccess && window.insights?.chrome?.hideGlobalFilter();
  }, [isSuccess]);

  useEffect(() => {
    /**
     * On every rerender, based on URL change (location.pathname),
     * reset the user's status to loading before authenticating again.
     */
    queryClient.invalidateQueries('user');
  }, [location.pathname]);

  if (isError === true) {
    return <Unavailable />;
  } else if (isLoading === true || isFetching === true) {
    return <Loading />;
  } else if (isSuccess === true) {
    return <>{children}</>;
  }
}

export default function Navigation() {
  const [open, setOpen] = useState(false)
  const { pathname } = useLocation()
  const { push } = useHistory()

  return (
    <NavBar>
      <Logo>
        <LogoImg src={require('../../../images/logo.png')} />
      </Logo>
      <Nav>
        {routes.map((route, i) => (
          <Tab
            key={i}
            onClick={() => push(route.path)}
            active={pathname === route.path}
          >
            <img src={route.icon} alt={route.alt} />
            <p>{route.title}</p>
          </Tab>
        ))}
      </Nav>
      <UtilitiesContainer open={open} setOpen={setOpen} />
    </NavBar>
  )
}

function VariableMainContent(props) {
  const location = useLocation();
  const [urlLocation, setUrlLocation] = useState(
    location.pathname.split("/")[1]
  );
  useEffect(() => {
    setUrlLocation(location.pathname.split("/")[1]);
  }, [location]);

  switch (urlLocation) {
    case !urlLocation:
      return <p>homepage</p>;
    case "grid":
      return <Dashboard />;
    case "dashboard":
      return <Dashboard />;
    case "create-event":
      return <CreateEvent />;
    case "view-events":
      return <ViewEvents />;
    case "events":
      return <FullEvent {...props} />;
    default:
      return <p>you did a bad</p>;
  }
}

function App(props) {
  initializeAnalytics();
  const { authService } = useOktaAuth();
  const dispatch = useDispatch();
  const history = useHistory();
  const location = useLocation();
  const user = useSelector((state) => state.user);

  useEffect(() => {
    if (location.pathname === "/connect/twitter/callback") return;
    if (!user.initialized) {
      dispatch(initializeUser(authService, history));
      return;
    }
    // eslint-disable-next-line
  }, [user, location]);

  return (
    <Switch>
      <Route exact path="/login" component={LoginOkta} />
      <Route path="/implicit/callback" component={LoginCallback} />
      <Route>
        <NavMenuTemplate>
          <SecureRoute path="/home" component={Home} />
          <SecureRoute path="/analytics" component={Analytics} />
          <SecureRoute path="/connect" component={ConnectAccounts} />
        </NavMenuTemplate>
      </Route>
    </Switch>
  );
}

SplashNav = () => {
  const [selectedPage, setSelectedPage] = useState(0);
  const { pathname } = useLocation();

  useEffect(() => {
    switch (pathname) {
      case "/splash":
        setSelectedPage(0);
        break;
      case "/splash/team":
        setSelectedPage(1);
        break;
    }
  }, [pathname]);

  return (
    <Container>
      <FlexContainer>
        <Title>Trash Panda</Title>
        <NavLink selected={selectedPage == 0}>
          <Link to="/splash">What We Do</Link>
        </NavLink>
        <NavLink selected={selectedPage == 1}>
          <Link to="/splash/team">Meet the Team</Link>
        </NavLink>
      </FlexContainer>
      <a href="https://play.google.com/store/apps/details?id=com.thetrashpanda.twa">
        <PlayBadge src={playBadgeImg} />
      </a>
    </Container>
  );
}

export default function ScrollToTop() {
  const { pathname } = useLocation();
  const contentEl = document.getElementById('content');

  useEffect(() => {
    if (contentEl) contentEl.scrollTop = 0;
  }, [pathname, contentEl]);

  return null;
}

export default function AnalyticsPageViewLogger() {
  const location = useLocation();
  const analytics = useAnalytics();
  const user = useUser();
  // By passing `user.uid` to the second argument of `useEffect`,
  // we only set user id when it exists
  useEffect(() => {
    if (user?.uid) {
      analytics.setUserId(user.uid);
    }
  }, [user?.uid]); // eslint-disable-line react-hooks/exhaustive-deps

  // By passing `location.pathname` to the second argument of `useEffect`,
  // we only log on first render and when the `pathname` changes
  useEffect(() => {
    analytics.logEvent('page-view', { path_name: location.pathname });
  }, [location.pathname]); // eslint-disable-line react-hooks/exhaustive-deps

  return null;
}

function Signin() {
    const dispatch = useDispatch();
    const history = useHistory();
    const { search } = useLocation();

    const onSignin = () => history.push('/');

    useEffect(() => {
        const { token } = queryString.parse(search);
        dispatch(signin(token, onSignin));
    }, []);

    return <></>;
}

NotFound = () => {
  const location = useLocation();

  const { isAuth } = useSelector(
    state => ({
      isAuth: !!state.auth.userData.id
    }),
    shallowEqual
  );

  const userPath = isAuth ? path.ROOT : path.LOGIN;

  return (
    <section className="hero is-fullheight">
      <div className="hero-body">
        <section className={`section ${classes.section}`}>
          <div className="container">
            <div className="columns is-vcentered is-desktop">
              <div className="column has-text-centered">
                <h1 className="title">{useFormatMessage('NotFound.404')}</h1>
                <p className="subtitle">
                  {useFormatMessage('NotFound.url', { url: location.pathname })}
                </p>
                <Link className="button is-info is-normal" to={userPath}>
                  {useFormatMessage('NotFound.back')}
                </Link>
              </div>
              <div className="column has-text-centered">
                <img src={NotFoudImage} alt="404 error" />
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
  );
}

ToastContainer = ({ state, onClickUndo }) => {
  // ! redux
  const { data } = useSelector(state => state.message.messages);
  const { toast } = useSelector(state => state.message.toastState);

  // ! query
  const query = useLocation();
  const { filter } = qs.parse(query.search, {
    ignoreQueryPrefix: true,
  });

  const hasMsgs = data && data[`${filter || 'all'}`].length;

  return (
    <Toast
      state={state}
      toast={toast}
      onClickUndo={onClickUndo}
      hasMsgs={hasMsgs}
    />
  );
}

ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

export default function ScrollToTop() {
	const { pathname } = useLocation();

	useEffect(() => {
		window.scrollTo(0, 0);
	}, [pathname]);

	return null;
}

Rooter = () => {
  const { standalone } = useContext(AppContext);
  const { pathname } = useLocation();

  return (
    <Switch>
      <Route
        path={`/queen/:${READ_ONLY}?/questionnaire/:idQ/survey-unit/:idSU`}
        component={secure(OrchestratorManager)}
      />
      <Route path={`/queen/:${READ_ONLY}?/survey-unit/:idSU`} component={secure(QueenRedirect)} />
      {!standalone && <Route path="/queen/synchronize" component={secure(Synchronize)} />}
      <Route path="/queen/visualize" component={Visualizer} />
      {!standalone &&
        !pathname.startsWith('/queen/authentication') &&
        pathname.startsWith('/queen') && <Redirect to="/queen/visualize" />}
      {standalone && !pathname.startsWith('/queen/authentication') && (
        <Redirect to="/queen/visualize" />
      )}
    </Switch>
  );
}

export default function Headerbar({children}) {
    const location = useLocation()

    return (
        <div className="header-bar" style={{background: location.pathname === '/'? null:'none'}}>
            {children}
        </div>
    )
}

export default function Header() {
  const location = useLocation();
  const [links, setLinks] = useState([
    {
      _id: Math.random().toString(),
      title: "DashBoard",
      link: "/",
    },
    {
      _id: Math.random().toString(),
      title: "About",
      link: "/about",
    },
    {
      _id: Math.random().toString(),
      title: "Contact",
      link: "/contact",
    },
  ]);
  return (
    <div className="header">
      <Link to="/">
        <div className="logo">
          <img src={Logo} alt="err" />
          <p>STONKS</p>
        </div>
      </Link>
      <div className="header-options">
        {links?.map(({ _id, title, link }) => (
          <Link to={link}>
            <p className={`${location.pathname === link && "active"}`}>
              {title}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default function NavSection({ navConfig, ...other }) {
  const { pathname } = useLocation();
  const match = (path) => (path ? !!matchPath({ path, end: false }, pathname) : false);

  return (
    <Box {...other}>
      <List disablePadding>
        {navConfig.map((item) => (
          <NavItem key={item.title} item={item} active={match} />
        ))}
      </List>
    </Box>
  );
}

ConfigLoader = ({ children }) => {
  const location = useLocation()
  const { config, setActiveShop } = useConfig()

  useEffect(() => {
    if (!config) {
      setActiveShop(true)
    }
  }, [config])

  useEffect(() => {
    if (location.state && location.state.scrollToTop) {
      window.scrollTo(0, 0)
    }
  }, [location.pathname])

  if (!config) {
    return 'Loading'
  }

  return children
}

function AppFooter() {
  const location = useLocation();

  return (
    <footer className="pb-6 mt-6 text-center">
      { location.pathname === "/" ? (
        <NavLink
          to="/about"
          className="transition duration-500 ease-in-out text-gray-800 border-b border-gray-800 hover:text-gray-500 hover:border-gray-500"
          data-testid="footer-about-link"
        >
          About
        </NavLink>
      ) : (
        <p>Made by <a className="transition duration-500 ease-in-out font-medium text-pink-600 hover:text-pink-500" href="https://phixyn.com/" target="_blank">Phixyn</a></p>
      )}

    </footer>
  )
}

ErroReducerCatcher = ({ children }) => {
  const errorCode = useSelector(({ errorReducer: { errorCode } }) => errorCode);
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    if (errorCode) {
      dispatch({ type: API_ERROR, payload: undefined });
    }
  }, [pathname]);

  if (errorCode) {
    const State = errorStates[errorCode];
    const name = 'Access Requests';
    return <State serviceName={name} />;
  }

  return children;
}

App = (props) => {
    const { pathname } = useLocation();
    const { push } = useHistory();
    const appNavClick = useMemo(
        () => ({
            signatures(redirect) {
                insights.chrome.appNavClick({ id: 'signatures', redirect });
            },
            systems(redirect) {
                insights.chrome.appNavClick({ id: 'systems', redirect });
            }
        }),
        []
    );

    useEffect(() => {
        insights.chrome.init();
        const baseComponentUrl = pathname.split('/')[4];
        const unregister = insights.chrome.on('APP_NAVIGATION', (event) => {
            if (event.domEvent) {
                push(`/${event.navId}`);
                appNavClick[baseComponentUrl] !== undefined
                    ? appNavClick[baseComponentUrl](true)
                    : appNavClick.signatures;
            }
        });

        return () => unregister();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return  <Routes childProps={props} />;
}

NavTabs = ({ tabItems, TabsProps: { className, ...TabsProps } }) => {
  const { push } = useHistory();
  const { pathname, search } = useLocation();
  const activeTab = tabItems.find(({ pathname: tabPathname }) =>
    pathname.includes(tabPathname)
  );
  const handleTabClick = (_event, tabIndex) =>
    push({ pathname: tabItems[tabIndex].pathname, search });

  return (
    <Tabs
      {...TabsProps}
      className={classnames('ins-c-navtabs', className)}
      activeKey={activeTab ? activeTab.eventKey : 0}
      onSelect={handleTabClick}
    >
      {tabItems.map((item) => (
        <Tab key={item.eventKey} {...item} />
      ))}
    </Tabs>
  );
}

Chunk = ({
  children,
  color,
  align,
  orientation,
  explanation,
  url,
}) => {
  const location = useLocation()
  const history = useHistory()

  const isActive = useMemo(() => {
    return location.pathname.includes(url)
  }, [location.pathname, url])

  const handleChunkClick = useCallback(() => {
    history.replace(url)
  }, [url, history])

  const linkClassNames = [isActive && 'active'].filter(Boolean).join(' ')

  return (
    <Container color={color}>
      <button className={linkClassNames} onClick={handleChunkClick}>
        {children}
      </button>
      {isActive && explanation && (
        <Popover orientation={orientation} align={align}>
          {explanation()}
        </Popover>
      )}
    </Container>
  )
}

LoginPage = ({ currentUser, githubSignInStart }) => {
  const history = useHistory();
  const { search } = useLocation();
  if (currentUser) history.push('/');
  const params = new URLSearchParams(search);
  const code = params.get('code');
  const authState = params.get('state');

  useEffect(() => {
    if (code) {
      if (!authState === sessionStorage.getItem('authState')) {
        return console.warn('Auth state does not match.');
      }
      githubSignInStart(code);
    }
  }, [authState, code, githubSignInStart]);

  return (
    <main data-test="page-login" className="login-page">
      <div className="login-page__showcase"></div>
      <LoginCard />
    </main>
  );
}

NavigationItem = ({ name, path }) => {
  const location = useLocation();
  let active = '';

  if (path === '/' && path === location.pathname) {
    active = 'active';
  }

  if (path === '/donations' && location.pathname.includes('donate')) {
    active = 'active';
  }

  if (path === '/petitions' && location.pathname.includes('sign')) {
    active = 'active';
  }

  if (path !== '/' && location.pathname.includes(path)) {
    active = 'active';
  }

  return (
    <StyledNavigationLinks>
      <Link to={path} className={active}>
        {name}
      </Link>
    </StyledNavigationLinks>
  );
}

basic = () => {
  const facetResults = useSelector(state => state.perspective1)
  const location = useLocation()
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <ResultTable
        data={facetResults}
        facetUpdateID={0}
        resultClass='perspective1'
        facetClass='perspective1'
        fetchPaginatedResults={() => null}
        updatePage={() => null}
        updateRowsPerPage={() => null}
        sortResults={() => null}
        location={location}
        rootUrl=''
      />
    </div>
  )
}

Header = () => {
  const location = useLocation();

  return (
    <header className="govuk-header" role="banner" data-module="govuk-header">
      <a href="#main-content" className="govuk-skip-link">Skip to main content</a>

      <div className="govuk-header__container govuk-width-container">
        <label hidden htmlFor="link-div">GOV.UK</label>
        <div className="govuk-header__logo" id="link-div">
          <a className="govuk-header__link govuk-header__link--homepage" href="/">
            <span className="govuk-header__logotype">
              <svg role="presentation" focusable="false" className="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="32" width="36">
                <path fill="currentColor" fillRule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" />
                <image src="/assets/images/govuk-logotype-crown.png" className="govuk-header__logotype-crown-fallback-image" />
              </svg>
              <span className="govuk-header__logotype-text">GOV.UK</span>
            </span>
          </a>
        </div>
        <Nav urlStem={location.pathname} />
      </div>
    </header>
  );
}

GenreCard = () => {
  const location = useLocation();

  const [genreArray, setGenreArray] = useState([]);

  // calling the api only one
  useEffect(() => {
    callGenreApi();
    // eslint-disable-next-line
  }, []);

  const callGenreApi = async () => {
    // awaiting so the async call can be complete
    let genreData = await apiDataGenres(location.state.genreID);
    setGenreArray(genreData);
  };
  return (
    <div>
      <DisplayCommonCard animeData={genreArray} />
    </div>
  );
}

// import Debugger from './Debugger';

function URLBar() {
  let location = useLocation();

  return (
    <View
      style={{
        position: 'absolute',
        bottom: 0,
        right: 0,
        margin: 15,
        backgroundColor: colors.n9,
        padding: 8,
        borderRadius: 6
      }}
    >
      {location.pathname}
    </View>
  );
}