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>

check out the Demo →

• Static location hook now supports record: option, which allows to save the history of location changes in hook.history. It improves the testing DX and allows to detect redirects in SSR responses. #113, thanks @davidje13
• Link and Redirect components now can accept replace option that will tell wouter that replaceState 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>
);