solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.14k stars 147 forks source link

useLocation is not reactive #303

Closed qlaffont closed 1 year ago

qlaffont commented 1 year ago

Describe the bug

When I use useLocation, I want to subscribe to location changes. But it seems to not work.

Your Example Website or App

https://github.com/qlaffont/solid-start-issue-router

Steps to Reproduce the Bug or Issue

  1. Generate template for solid-starter
    
    dev pnpm create solid
    .../share/pnpm/store/v3/tmp/dlx-95985    | Progress: resolved 1, reused 0, downl.../share/pnpm/store/v3/tmp/dlx-95985    |   +1 +
    .../share/pnpm/store/v3/tmp/dlx-95985    | Progress: resolved 1, reused 0, downl.../share/pnpm/store/v3/tmp/dlx-95985    | Progress: resolved 1, reused 1, downloaded 0, added 1, done

create-solid version 0.2.31

Welcome to the SolidStart setup wizard!

There are definitely bugs and some feature might not work yet. If you encounter an issue, have a look at https://github.com/solidjs/solid-start/issues and open a new one, if it is not already tracked.

✔ Where do you want to create the app? … solid-start ✔ Which template do you want to use? › bare ✔ Server Side Rendering? … no ✔ Use TypeScript? … yes found matching commit hash: f0860887030e0632949b3f497e279aecb6ed5afd downloading https://github.com/solidjs/solid-start/archive/f0860887030e0632949b3f497e279aecb6ed5afd.tar.gz to /home/quentin/.degit/github/solidjs/solid-start/f0860887030e0632949b3f497e279aecb6ed5afd.tar.gz extracting /examples/bare from /home/quentin/.degit/github/solidjs/solid-start/f0860887030e0632949b3f497e279aecb6ed5afd.tar.gz to /home/quentin/Documents/dev/solid-start/.solid-start cloned solidjs/solid-start#main to /home/quentin/Documents/dev/solid-start/.solid-start ✔ Copied project files

Next steps: 1: cd solid-start 2: pnpm install 3: pnpm run dev --open

To close the dev server, hit Ctrl-C


2 - Import useLocation in createEffect
3 - Nothing happened

### Expected behavior

useLocation need to rerender and update value.

### Screenshots or Videos

_No response_

### Platform

- OS: Linux
- Browser: Brave (Chrome)
- Version: Version 1.59.117 Chromium: 118.0.5993.70 (Official Build) unknown (64-bit)

### Additional context

_No response_
qlaffont commented 1 year ago

:wave: @ryansolid

Brendan-csel commented 1 year ago

Are you accessing properties of the returned location?...

const location = useLocation();  // location itself is not a signal that will cause effects to run again.

// BUT the following will create a dependency on location.pathname
const pathname = location.pathname;  
qlaffont commented 1 year ago

Yes i have try this but it doesn't work :/

Brendan-csel commented 1 year ago

When I change your effect to access location.pathname it logs in the browser console each time it changes

  createEffect(() => {
    console.log("location.pathname", location.pathname);
  })

image