Raise route params higher in the component tree

[KrisCoulson]

Currently, the params from useParams are only accessible inside of a route component. With the introduction of the Set component, we still cannot have dynamic Layouts. My initial suggestion is to raise the ParamsContext.Provider higher in the component architecture to be able to access the params in the Set component. Currently, the ParamsContext.Provider is initialized in the PageLoader component

redwood/packages/router/src/page-loader.tsx

Lines 148 to 152 in 2a38022

	<ParamsContext.Provider value={this.state.params}>
	<PageLoadingContext.Provider value={{ loading: false }}>
	<PageFromLoader {...this.state.params} />
	</PageLoadingContext.Provider>
	</ParamsContext.Provider>

Another solution would be to make params available as a prop in the Set component that passes those params to our Layout by default. This way you don't have to know to useParams you just have access to them in your Layout.

[thedavidprice]

Looping in @Tobbe

@KrisCoulson did you happen to see this PR that just merged today? It adds some nice, new features to Routes.js:
#1898

See this syntax reference from the original RFC discussion:
https://community.redwoodjs.com/t/redwood-router-with-layouts-context-providers-etc/1342/25

Possible this will provide the capability you're looking for?

[KrisCoulson]

@thedavidprice I have been talking with @Tobbe about this. Told him I would create the issue. I pulled the canary version to test the upgrade for my use case. The Set component makes it possible to do what I am trying to do now. But it's a bit of a pain because I would have to manually parse the location.pathname to get the id to make a request

Something like this

  const { pathname } = useLocation()
  const eventId = pathname.split('/').filter((item) => !!item.length)[1]
  const { loading, error, data } = useQuery(QUERY, {
    variables: { eventId: parseInt(eventId, 10) },
  })

[thedavidprice]

Thanks! I just saw Tobbe opened #2043 simultaneously and assumed you're collaborating.

[thedavidprice]

@Tobbe could you provide a final example like the above in the PR description?

[Tobbe]

You bet!