Any way to use outside of hooks?

[dy]

If, for example, we use redux-sagas, and we'd like to navigate from a saga, what's the supposed way to connect wouter?

[molefrog]

Hi @dy! This is actually an interesting question. We intentionally dropped a support for history object to make it easier to use wouter only in a context of a component.

You could potentially obtain a reference to a router object through the context by passing it down to createSagaMiddleware function (see context option). But unfortunately the only proper way to navigate is to use useLocation hook which needs to be called inside of a component.

The workaround I believe is to use pub-sub here. You could create a top-level component:

import { channel } from 'redux-saga'
import { useLocation } from 'wouter'
import NanoEvents from 'nanoevents'

// you can also use channels from `redux-saga`
const emitter = new NanoEvents()

// Put this component at the top-level of your app
const WouterBridge = () => {
  const [location, setLocation] = useLocation();

  useEffect(() => emitter.on('navigate', loc => setLocation(loc));
}

// inside saga
function * appSaga() {
  emitter.emit('navigate', '/app');
}

This example probably lacks things waiting for the navigation to happen, but you get the idea.

[dy]

Interesting approach! I think for our purposes having global history wired to wouter is enough though. Thanks for the example anyways!

[GeorchW]

Fyi you can just leak the setLocation value to a global variable:

let setLocation = (to: string, options?: { replace?: boolean }) => {
    // optional: fallback if component isn't (yet) mounted
    // you can also just throw an exception if you like
    if (options?.replace)
        window.location.replace(to);
    else
        window.location.assign(to);
}

function ExternalWouterComponent() {
    const [location, _setLocation] = useLocation();
    setLocation = _setLocation;
    return <></>
}

Just make sure that ExternalWouterComponent is always mounted, e.g. in the root component.

[veatla]

@GeorchW, Thanks for answer...but honestly, I don't really like to use "let" when I export some function like this... So I prefer more like this:

import { useLocation } from 'wouter';
const LocationManager = {
    setLocation: (to: string, options?: { replace?: boolean }) => {
        // optional: fallback if component isn't (yet) mounted
        // you can also just throw an exception if you like
        if (options?.replace) window.location.replace(to);
        else window.location.assign(to);
    },
};

export const setLocation = (...args: Parameters<typeof LocationManager.setLocation>) => {
    return LocationManager.setLocation(...args);
};

function ExternalWouterComponent() {
    const [_, _setLocation] = useLocation();
    LocationManager.setLocation = _setLocation;
    return <></>;
}
export default ExternalWouterComponent;

[GeorchW]

Yeah, exporting let won't work, so you need another layer of indirection like you wrote. I just wanted to write a compact/small example as an illustration.

[molefrog]

Hey there, the solution I proposed above is a bit outdated, I think the easiest way to get it working is to use:

// this module is a hook that subscribes to browser location, which wouter uses internally by default
// in the latest version we also export `navigate` method 
import { navigate } from "wouter/use-location" 

navigate("/", { replace: true });

Hope it helps! Keep in mind, that this wouldn't work if you plan to use wouter with custom location (e.g. hash-based).

[GeorchW]

Hmm, this is not included in the documentation (only implicitly here). Could we maybe add it to the FAQ? I'm happy to write a PR

[molefrog]

Hmm, this is not included in the documentation (only implicitly here). Could we maybe add it to the FAQ? I'm happy to write a PR

Yes, please 🙏