Releases: molefrog/wouter
v2.8.1: TypeScript Improvements
- When route parameters can be inferred from the path, they now have a type of
{ readonly [k in string]: string | undefined }
. This takes into account optional segments that can beundefined
#262, thanks @HansBrende - Proper typings of
Route
children: it does not allow mixing render props and other elements together #263, thanks @HansBrende Switch
now has less strict type of its children to allow conditional rendering and avoid confusion 8f943ab
v2.8.0: It's been a while
- Feature: Route parameters are now automatically inferred in TypeScript. @itsMapleLeaf via #211
- Feature:
Link
component will now forward ref to the underlyinga
element of custom component provided by user. @trymoto via #259 - Optimization: use
useState
instead ofuseRef
for values that must be initialized only once. @HelKyle via #252 and #251 - Bugfix: Prevent Link navigation when event was cancelled. @Tomas2D via #239
🇺🇦 We stand with Ukraine
Donate or spread the world to help Ukrainian soldiers and refugees
Bug fixes & code size optimizations
- Fix a bug with a
Switch
not being able to process falsy children @jacobbuck via #212 - Code size optimizations @cbbfcd via #191 and #186
Bugfixes
v2.7.3
v2.7.0: React 17 support and absolute routes within a subpath
We're continuing to improve the library by keeping it small and simple, thanks to our wonderful contributors. First of all, it's the React 17 support: I'm sure many of you have already upgraded your project to the new version of React, which apparently "has no new features". Wouter now has proper peerDependencies
that allow you to use it with React 17 thanks to @omgovich!
Another important update is that it's now possible to access the routes outside of the base scope when using a base
parameter:
<Router base="/app">
<Link href="/relative">Relative Link</Link>
{/*
by prexing a path with tilda, you can reference a global route: when you click on this link
it navigates you to "/absolute", and not "/app/absolute"
*/}
<Link href="~/absolute">Absolute Link</Link>
</Router>
Maintenance release
This patch release contains a few important bug-fixes:
base
parameter inRouter
is now case-insensitive. Thanks @Veranete @cbbfcd via #138- Fixed a "func.apply is not a function" error when using a custom matcher. @cbbfcd via #137
- The list of
events
is now exported from theuse-location.js
module. @o-alexandrov via #129
Happy wouting!
Dual publish
This release aims to fix a problem when a subpath module require("wouter/static-location")
can't be properly required from Node.js, thanks @davidje13 #126
Wouter now properly supports ESM and CommonJS environments and it can even work within .mjs
scripts!
A route to extendability
✨ The new release brings up several important updates!
-
The new project logo, thanks to Katya Simacheva
-
Released in 2.5.1 Wouter now targets ESM Node modules and properly supports CJS submodules. #126 thanks @davidje13
-
Using a default route in a Switch just became easier: use
<Route />
component with no props and it will match everything that didn't match regular routes. @cbbfcd via #103
<Switch>
<Route path="/users> ... </Route>
- <Route path="/:rest*">
+ <Route>
Not Found!
</Route>
</Switch>
- Static location hook now supports
record:
option, which allows to save the history of location changes inhook.history
. It improves the testing DX and allows to detect redirects in SSR responses. #113, thanks @davidje13 Link
andRedirect
components now can acceptreplace
option that will tell wouter thatreplaceState
navigation should be used. Example:
<Link to="/users" replace>Users</Link>
<Redirect to="/home" replace />
-
Some tiny updates in the README: table of contents for better navigation, more examples, testimonials! It's such an honor to see that wouter's community is getting bigger and developers trust it in production:
-
The entire type definition codebase had been reworked! Types are updated to support latest features like default routes and replace navigation, and to support custom location hooks that might have specific navigational options. This change is especially important in terms of wouter's new strategy: supporting new features through external extendability see #102 (comment).
This will allow us to easily implement custom location hooks, that can for example support state changes:
import { useLocation } from "wouter";
import useLocationWithState, { LocationWithState } from '@wouter/use-location-state';
const NavigateWithState = () => {
// useLocation is a generic function that can accept the custom location hook type
const [location, update] = useLocation<LocationWithState>();
const onClick = useCallback(() => {
// this is now a valid function call, `state:` option is included in LocationWithState type
update("/home", state: { foo: "bar" });
}, [update]);
return null;
}
const App = () => (
<Router hook={useLocationWithState}>
<Link<LocationWithState> to="/app" state={{ foo: 'bar' }}>Click Me!</Link>
</Router>
);
First-class base path support!
Though the base path support was possible before, via a custom useLocation
hook, it wasn't fully SEO-friendly — for example, the link would still have a relative href attribute.
After a long discussion, it's been decided to enable the base path support on a top-level Router component 🎉 You can now just wrap your app with <Router base="/app">
and that's it! Learn more about this feature →
The added bundle cost is just 48 extra bytes.