Params don't change when changing URL

Describe the bug

I have these routes in my Router with HashIntegration:

<Routes>
        <Route path="" component={Home} />
        <Route path="docs/:doc" component={Docs} />
</Routes>

Home just says home and Docs displays Doc: {and here the :doc from useParams().doc}

When i load the page at localhost:3000/#/ it works fine. Now when i change the url to localhost:3000/#/docs/cool and hit enter it also switches and shows Doc: cool. But when i change to url to localhost:3000/#/docs/notworkingsad it still shows Doc: cool and only when i hold shift and then refresh to rebuild the connection it shows Doc: notworkingsad.

so in short:

when using hashrouter and changing page, works fine. when then changing an parameter it doesnt reload the component with the parameter until i reload the whole page with a new connection.

Your Example Website or App

See code in Describe the bug section

Steps to Reproduce the Bug or Issue

See code in Describe the bug section

Expected behavior

Also “reload” the component with the new parameters like when switching the page.

Screenshots or Videos

No response

Platform

• OS: [Windows]
• Browser: I tested: [Chrome, Firefox]
• Version: [OS, Browsers and all node packages are on the newest version]

Additional context

No response

[ryansolid]

Yeah don’t destructure from useParams

Try

const params = useParams();

href={`/l/${params.lid}${item.path}`}

The properties on the object are reactive so they need to be accessed under a tracking scope.

[tendant]

Had same issue. Below documentation is very useful:

https://github.com/solidjs/solid-router#useparams

const params = useParams();

// fetch user based on the id path parameter
const [user] = createResource(() => params.id, fetchUser);

The fetchUser won’t be triggered if use params.id directly when createResource().

const params = useParams();

// Won't work!
const [user] = createResource(params.id, fetchUser);