Can't track "global" URL params

[Moshyfawn]

Describe the bug

There's no way to track current URL parameters in a "root" layout / route. useNearestMatch isn't updated and useMatch({ strict: false }) doesn't "track" parameters updates in nested routes.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-csfaug?file=src/main.tsx

Steps to Reproduce the Bug or Issue

1. Open StackBlitz sandbox
2. Click any "Even Deeper" link
3. See the issue: URL parameters values display undefined in the "layout" component (/layout)

Expected behavior

As a user, I expected to be able to "track" URL params in general: however nested the route is, if there's a parameter in the URL, I want to be able to "react" to it's change. Currently, don't see a way to achieve the desired behaviour

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Firefox
• 108.0b9

Additional context

{
  "@tanstack/react-router": "0.0.1-beta.30",
  "@tanstack/react-router-devtools": "0.0.1-beta.30"
}

[tannerlinsley]

I think this is what you're looking for: https://stackblitz.com/edit/tanstack-router-j53jq8?file=src%2Fmain.tsx,package.json

[Moshyfawn]

I think this is what you're looking for: https://stackblitz.com/edit/tanstack-router-j53jq8?file=src%2Fmain.tsx,package.json

Yep, it does the job!

It's not incredibly type-safe, but it defined accommodates the use-case I've been trying to work around by storing params in sessionStorage :P

[tannerlinsley]

Yeah, that's the idea. It's as type safe as you can get (optional versions of all of the possible params). But that's technically true of its usage, they can't be guarantied to be there.

[Moshyfawn]

Yeah, that's the idea. It's as type safe as you can get (optional versions of all of the possible params). But that's technically true of its usage, they can't be guarantied to be there.

Ah, my bad. I'm seeing only Partial<unknown> type without the params types inferred in that StackBlitz sandbox you've shared; hence my type-safety remark. Partial params type makes the most sense, for sure!

One issue I've noticed trying the new useParams hook in codesandbox (as I was experiencing type issues in StackBlitz) is that eslint complains about useParams call inside the component prop of createRoute method. Here's a quick repro sandbox

Warning
React Hook "useParams" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. (react-hooks/rules-of-hooks)

[tannerlinsley]

Yeah generally these components would be extracted out to functions which would make them not complain… :( Tanner Linsley

…

On Dec 8, 2022 at 3:56 PM -0700, moshyfawn ***@***.***>, wrote: > Yeah, that's the idea. It's as type safe as you can get (optional versions of all of the possible params). But that's technically true of its usage, they can't be guarantied to be there. Ah, my bad. I'm seeing only Partial<unknown> type without the params types inferred in that StackBlitz sandbox you've shared; hence my type-safety remark. Partial params make the most sense, for sure! One issue I've noticed trying the new useParams hook in codesandbox (as I was experiencing type issues in StackBlitz) is that eslint complains about useParams call inside the component prop of createRoute method. Here's a quick repro sandbox > Warning > React Hook "useParams" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. (react-hooks/rules-of-hooks) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[Moshyfawn]

Yeah generally these components would be extracted out to functions which would make them not complain… :( Tanner Linsley
…
On Dec 8, 2022 at 3:56 PM -0700, moshyfawn @.>, wrote: > Yeah, that's the idea. It's as type safe as you can get (optional versions of all of the possible params). But that's technically true of its usage, they can't be guarantied to be there. Ah, my bad. I'm seeing only Partial type without the params types inferred in that StackBlitz sandbox you've shared; hence my type-safety remark. Partial params make the most sense, for sure! One issue I've noticed trying the new useParams hook in codesandbox (as I was experiencing type issues in StackBlitz) is that eslint complains about useParams call inside the component prop of createRoute method. Here's a quick repro sandbox > Warning > React Hook "useParams" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. (react-hooks/rules-of-hooks) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you modified the open/close state.Message ID: @.>

Fair enough! I appreciate your input and the tremendous amount of work and support on the router!