@reach/router: how to get the current route / page?

Question

How does one get the current route for reach router. In react router one would get that through the params?

The docs don't currently show an example how to do this.

Deserved

In the this.props.location in your component you have your location details including the current location. – Swedenborgianism

Answer 1

Use the this.props.location as it's passed down to the component:

https://reach.tech/router/api/Router

Deserved

Answer 2

Alternatively, use the useLocation hook (since 1.3.0):

import { useLocation } from "@reach/router"

const useAnalytics = () => {
    const location = useLocation()

    useEffect(() => {
        ga.send(['pageview', location.pathname])
    }, [])
}

Ref: https://reach.tech/router/api/useLocation

Jard

Answer 3

You can simply just import useLocation from @reach/router and assign it to a const use it in your code as below.

import React from "react";

import { useLocation } from "@reach/router";

const YourPage = () => {
  const location = useLocation();
  return (
    <Page>
      <div>{(location.pathname = "/terms/")}</div>
    </Page>
  );
};

export default YourPage;

Apotheosize