Convenient no-path Route trick.

README.md

@@ -372,6 +372,15 @@ import { Route } from "wouter";
 <Route path="/orders/:status" component={Orders} />
 ```
 
+A route with no path is considered to always match, and it is the same as `<Route path="*" />`. When developing your app, use this trick to peek at the route's content without navigation.
+
+```diff
+-<Route path="/some/page">
++<Route>
+  {/* Strip out the `path` to make this visible */}
+</Route>
+```
+
 #### Route Nesting
 
 Nesting is a core feature of wouter and can be enabled on a route via the `nest` prop. When this prop is present, the route matches everything that starts with a given pattern and it creates a nested routing context. All child routes will receive location relative to that pattern.

packages/wouter/src/index.js

@@ -77,14 +77,11 @@ export const useSearch = () => {
 };
 
 const matchRoute = (parser, route, path, loose) => {
-  // falsy patterns mean this route "always matches"
-  if (!route) return [true, {}];
-
   // when parser is in "loose" mode, `$base` is equal to the
   // first part of the route that matches the pattern
   // (e.g. for pattern `/a/:b` and path `/a/1/2/3` the `$base` is `a/1`)
   // we use this for route nesting
-  const { pattern, keys } = parser(route, loose);
+  const { pattern, keys } = parser(route || "*", loose);
   const [$base, ...matches] = pattern.exec(path) || [];
 
   return $base !== undefined

packages/wouter/test/use-params.test.tsx

@@ -9,6 +9,18 @@ it("returns empty object when used outside of <Route />", () => {
   expect(result.current).toEqual({});
 });
 
+it("contains a * parameter when used inside an empty <Route />", () => {
+  const { result } = renderHook(() => useParams(), {
+    wrapper: (props) => (
+      <Router hook={memoryLocation({ path: "/app-2/goods/tees" }).hook}>
+        <Route>{props.children}</Route>
+      </Router>
+    ),
+  });
+
+  expect(result.current).toEqual({ "*": "app-2/goods/tees" });
+});
+
 it("returns an empty object when there are no params", () => {
   const { result } = renderHook(() => useParams(), {
     wrapper: (props) => <Route path="/">{props.children}</Route>,