Answer to my own Question (How to use Query Params a.k.a. Slugs in Plasmic Code Components):
- Modify your code component’s user file (in “components/XXXX.tsx”); and wrap the returned Plasmic equivalent component (PlasmicXXXX) with the PageParamsProvider data provider;
- The PageParamsProvider expects two properties: “params” and “query” (both must be key-value dictionaries); the “params” dictionary contains the parameters extracted from the URL using the React Param syntax (:slug) as declared on your Routes map; the “query” dictionary is the result of parsing the querystring (location.search) into a key-value dictionary (this can be done using the builtin javascript URLSearchParams Hook);
- Finally, in your App.tsx declare each route expecting slugs using the following syntax (“/path/:slug”);
- Now the slug (s) will be visible to the child components included on the page just like on the Plasmic CMS.
- You must repeat steps 1-4 for all pages expecting slugs.