@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.

In the `this.props.location` in your component you have your location details including the current location. — Nicolae Maties, Jul 01 '19 at 15:08

score 3 · Answer 1 · answered Jul 18 '20 at 14:39

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

score 1 · Accepted Answer · answered Jul 01 '19 at 15:12

1

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

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

answered Jul 01 '19 at 15:12

chrisjlee

18,399
22
72
104

score 0 · Answer 3 · answered Dec 17 '20 at 15:48

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;

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

3 Answers3