How to use query params or slugs in code components

Answer to my own Question (How to use Query Params a.k.a. Slugs in Plasmic Code Components):

  1. Modify your code component’s user file (in “components/XXXX.tsx”); and wrap the returned Plasmic equivalent component (PlasmicXXXX) with the PageParamsProvider data provider;
  2. 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 ( into a key-value dictionary (this can be done using the builtin javascript URLSearchParams Hook);
  3. Finally, in your App.tsx declare each route expecting slugs using the following syntax (“/path/:slug”);
  4. Now the slug (s) will be visible to the child components included on the page just like on the Plasmic CMS.
  5. You must repeat steps 1-4 for all pages expecting slugs.