molefrog/wouter v3.6.0

Support search in memory location

on GitHub

import { Router, useSearch } from "wouter";
import { memoryLocation } from "wouter/memory-location";

// Initialize memory location with path and search parameters
const { hook, searchHook } = memoryLocation({ 
  path: "/products?category=electronics",
  searchPath: "sort=price" 
});

// Use in your Router
function App() {
  return (
    <Router hook={hook} searchHook={searchHook}>
      <YourComponent />
    </Router>
  );
}

// Access both path and search in components
function YourComponent() {
  const [location, navigate] = hook();
  const search = useSearch();
  
  // location will be: "/products"
  // search will be: "category=electronics&sort=price"
  
  return (
    <div>
      <div>Current path: {location}</div>
      <div>Current search: {search}</div>
      <button onClick={() => navigate("/products/123?category=phones")}>
        Navigate
      </button>
    </div>
  );
}