wouter icon indicating copy to clipboard operation
wouter copied to clipboard

Different behavior of useLocation depends on base property

Open makzimko opened this issue 1 year ago • 1 comments

Usign wouter v3 (3.3.5 for now) and watching different behavior of useLocation hook. Previously I was not using base prop for Router and using useLocation to update search query in URL like that:

const [_, setLocation] = useLocation();
const setCategory = (id: string) => {
  setLocation(`?category=${id}`)
}

So starting from /games page after execute of setCategory('123') I was navigated to /games?category=123.

Now I'm trying to add language into URL using base prop for Router and have different behavior: when using base=en and starting from URL /en/games I navigated to /en?category=123. Please tell me is it expected behavior or it needs to be fixed somehow? Thank you in advance!

makzimko avatar Dec 12 '24 12:12 makzimko

In wouter terms, ?category=1 isn't a valid path as it doesn't start with a slash so this isn't guaranteed to work properly. I see two workarounds here:

  1. Provide the current path explicitly setLocation('${location}?category=${id}')
  2. Or use location.search = "..." to directly update the search string

molefrog avatar Dec 12 '24 15:12 molefrog