useLocation is not available on gatsby

[laurenskling]

If I want to use Reach Routers useLocation I have to:
import { useLocation } from '@gatsbyjs/reach-router';
as opposed to navigate, useLocation is not available on gatsby itself.
I don't really like it, that I have to install @gatsbyjs/reach-router myself.
Could we export useLocation in gatsby?

(by the way, came here, because I realized there's a difference in navigate imported from @gatsbyjs/reach-router and gatsby. Both work, but only the one from gatsby makes the page load correctly in develop)

[pieh]

Yes, this makes sense. We will accept a change that will introduce this re-export if someone is willing to implement it.

To implement the it, export will need to be added in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/gatsby-browser-entry.js

[aaronadamsCA]

Big upvote from us for this.

A gross workaround is to implement your own LocationProvider and useLocation hook.

TypeScript

import type { FC, ReactNode } from "react";
import { createContext, useContext } from "react";

const LocationContext = createContext<Location | null>(null);

interface LocationProviderProps {
  location: Location;
  children: ReactNode;
}

export const LocationProvider: FC<LocationProviderProps> = ({
  location,
  children,
}) => (
  <LocationContext.Provider value={location}>
    {children}
  </LocationContext.Provider>
);

export const useLocation = (): Location => {
  const location = useContext(LocationContext);

  if (location == null) {
    throw new Error("useLocation must be used inside LocationProvider");
  }

  return location;
};

JavaScript

import { createContext, useContext } from "react";

const LocationContext = createContext(null);

export const LocationProvider = ({ location, children }) => (
  <LocationContext.Provider value={location}>
    {children}
  </LocationContext.Provider>
);

export const useLocation = () => {
  const location = useContext(LocationContext);

  if (location == null) {
    throw new Error("useLocation must be used inside LocationProvider");
  }

  return location;
};

Now just wrap any page with <LocationProvider location={props.location}>, and its child components can use your custom useLocation hook (and if you forget, there's at least a nice clear error message during the build).