useLocation outside of a component?

[tslocke]

Is it possible to find out the router location outside of a component?

Just calling it gives Make sure your app is wrapped in a <Router />

I understand the router is not global, so I need to keep track of my router somehow and provide a context before calling useLocation, but I've no idea yet how to do that.

In case it sounds like an odd thing to need to do, it's for a debug helper I'd like to be able to call from the console.

Thanks

[tslocke]

Same question for useNavigate : )

e.g. after loading some async data I want to navigate to a certain route, depending on the data that came in.

(probably the same answer anyway?)

[ryansolid]

Yeah.. I mean it can't read from Context outside. But once it has the reference you are good to go. So I'd grab them inside a child of <Router>. useNavigate and useLocation both return things that can be run anywhere. You just need to get them in the first place under a component. So assign them to some long living object that is outside at that point, and reference that object where you need to? Something like that.

There is a runWithOwner if the exact context is important where you can call getOwner in the component and then run it. But I feel like that is likely overkill for what you are suggesting.

[jonybekov]

Thanks a lot!

I was able to do it with the following code

// store.ts
import { Navigator } from "@solidjs/router";

let globalNavigate: Navigator | null = null;

export const setGlobalNavigate = (navigate: Navigator) => {
    globalNavigate = navigate;
};

export const getGlobalNavigate = () => {
    return globalNavigate;
};

// api-client.ts
import { getGlobalNavigate } from "../lib/store";

export const createApiClient = (baseURL: string, storage: any) => {
  // ...Logout function to call inside response interceptor. We can't use useNavigate here, so I am using getGlobalNavigate
  const logout = () => {
    const navigate = getGlobalNavigate();
    storage.removeItem();

    if (navigate) {
      navigate("/login");
    } else {
     // I am using hash router, so # is important here
      window.location.href = "/#/login";
    }
  };

  async function get<T>(path: string, params: RequestInit = {}): Promise<T> {
    const r = await fetch(baseURL + path, {
      ...(await defaultFetchParams()),
      ...params,
    });

    const json = await r.json();

    if (json.code === 403) {
      logout();
      return json;
    }

    return json;
  }
  
  return {
    get
  };
};

// Root.tsx

function Root() {
  const navigate = useNavigate();
  setGlobalNavigate(navigate);
  
  // ...
}