Comments (8)
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).
from wouter.
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.
from wouter.
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.
from wouter.
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
from wouter.
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.
from wouter.
Interesting approach!
I think for our purposes having global history wired to wouter is enough though. Thanks for the example anyways!
from wouter.
@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;
from wouter.
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 🙏
from wouter.
Related Issues (20)
- `useSearch` does not work in SSR HOT 5
- `use-browser-location` HOT 2
- React is not re-rendeing page when there is query param change HOT 5
- V3: `memory-location` HOT 1
- V3: Refactor types for location hooks HOT 1
- Decoding URL params HOT 4
- `useSearchParams` for extracting and modifying search parameters HOT 10
- Should `useSearch` contain `?` character? HOT 1
- Route not accessible from multiple routers with different base HOT 1
- Bun install invalid hook call HOT 4
- Router don't work with Preact (10.18.1) HOT 3
- wouter-preact: Params with typescript? HOT 2
- How to add params in a nesting route? HOT 3
- v2.12.1 npm package is out of sync with v2.12.1 tag HOT 1
- v3.0.0-rc.1: When use hash router, Ctrl+click on <Link>, new window is opened with wrong url HOT 3
- Potential `useSearch` bug not triggering updates when used with `urql` HOT 9
- [Bug] Can't match default <Route>Not found</Route> when Router inside Switch HOT 3
- (?) Hash routing with no prefix slash index.html#/example/path/ HOT 3
- useSearch unsafe parameter decoding HOT 3
- v3.0.0-rc.2 decodeUriComponent is called before route match, breaking links with urlencoded slash (%2F) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wouter.