Using page params in a vanilla React application

Developer Support
1

The instructions in “Dynamic data-driven pages with code components” seem to be Next.js/Gatsby specific.

I can set a path with a slug for my item details page (something like “/itemDetails/[id]”). I can set a preview value for the “id” parameter in Studio, and see the right id used throughout the different components rendered inside the page in Studio. But when I load my application and navigate to “/itemDetails/1”, the parameter is undefined and everything falls apart :frowning:

The Next.js example in the docs makes use of PageParamsProvider, but that component is never mentioned anywhere else in that page or in any other. Looking at the source code of PlasmicRootProvider (plasmic/PlasmicRootProvider.tsx at @plasmicapp/loader-react@1.0.175 · plasmicapp/plasmic · GitHub) I see that it already renders a PageParamsProvider, but I also see that the params props is just forwarded from PlasmicRootProvider to PageParamsProvider. But that prop is never mentioned in the docs of PlasmicRootProvider, so… I’m really confused right now ^_^U.

Should I extract the params and manually pass them to PlasmicRootProvider?

2

Hi @asis_garcia-chao - sorry for the confusion.

It is in the docs on that page you linked:

image
image1480×1066 110 KB

The PageParamsProvider is optional since the PlasmicRootProvider takes a pageParams prop and can do the providing internally, as you saw - it’s just a shorthand. You could also use PageParamsProvider directly if you are doing something a bit more advanced with e.g. react-router. You don’t need to use Next.js/Gatsby—it should work with any router. (It’s just an object whose keys are the param names and values are their values.)