v2.11.0: Better SSR support

In this version, we are introducing a new prop that you can pass to the top-level Router component: ssrPath. The migration to the useSyncExternalStore hook in v2.10.0 made it possible for us to use a native way of telling React what the location should be when rendering on the server.

Prior to this release, our users had to override the default location hook with wouter/static-location, which lacked a nice DX and could cause hydration warnings. We are deprecating the static location hook in favor of the new ssrPath prop. Rendering your app on the server is now as easy as:

const handleRequest = (req, res) => {
  // top-level Router is mandatory in SSR mode
  const prerendered = renderToString(
    <Router ssrPath={req.path}>
      <App />
    </Router>
  );

  // respond with prerendered html
};

You can find a detailed guide in the README. To see the new API in action, we have prepared a simple demo powered by Wouter and Ultra, a server-side rendering framework for Deno. Take a look at how the app is rendered on the server and then hydrated in the browser.

Demo: wultra.deno.dev

Full changelog:

• SSR support in syncExternalStore #305
• index.d.ts now doesn't export types of methods that aren't present in the module #306 Thanks @Mati365
• Fix incorrect TS4.1 type exports #291 Thanks @tec27
• wouter-preact: Preact type declarations are now up-to-date with the main package, type exports have been fixed #309 #294 Thanks @robertknight and @jerssonM

v2.10.1: Bugfixes

This release fixes missing export error caused by incorrect import of useInsertionEffect hook in React <18. See #292
Thanks to @hudochenkov!

Other changes:

• Rollup plugin is no longer listed as dependency, #301

v2.10.0: `useSyncExternalStore`

In this alpha release, we're migrating useLocation hook to useSyncExternalStore under the hood (the new API for subscribing to external state sources compatible for concurrent mode).

This hook is available in React 18, for all earlier versions we've included a shim. We've also done some heavy refactoring which should lead to better performance and new features such as:

• useSearch exported from wouter/use-location for subscribing to location.search
• useLocationProperty for subscribing to arbitrary location updates.
• Standalone navigate with stable reference and no dependency on current location, which means that your components that only perform navigation won't have unnecessary re-renders.

import { useSearch, useLocationProperty, navigate } from 'wouter/use-location';

// get all search params:
const search = useSearch();

// set all search params:
navigate("?name=john");

// get individual search param (will not trigger a re-render if other params change! 🎉 )
const nameValue = useLocationProperty(() => new URLSearchParams(window.location.search).get("name"));

// set individual search param:
const params = new URLSearchParams(window.location.search);
params.set("name", "john");
navigate("?" + params.toString()); 

Thanks @HansBrende for their contribution.

v2.9.1: Type fixes

• TypeScript declarations now include proper types for parent prop in Router, #270

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 be undefined #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 underlying a element of custom component provided by user. @trymoto via #259
• Optimization: use useState instead of useRef 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

• Fix incorrect type of the makeMatcher function, @shannonrothe via #182
• Fix a bug with useLocation not triggering the update with query string is changed, @wuzzeb via #178

v2.7.3

• Fixed a regression bug introduced in v2.7.2: a path returned from useLocation() included a query string value e.g. "/foo?bar=baz", while it should have been just "/foo". See #170 for details.

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>

See #153 for more info. Credits @jvdsande