React-static: Custom routing children-parent props

[pbgms]

I have a simple static config:

{
   path: `/${lang}/works`,
   getProps: () => ({
      data: filterLanguage(JSON.parse(JSON.stringify(works)), lang),
   }),
   children: works.works.map(work => ({
       path: `/${work.slug}`,
       getProps: () => ({
           data: filterLanguage(Object.assign({}, {labels: works.labels}, work), lang),
       }),
   }))
},

The problem is that whenever child path is loaded, a parent path component always gets child's props. Parent's props are loaded correctly at first (when I am in parent path), but as soon as child gets loaded, parent's original props are overwritten with child's props.

Here is a full repo.

[tannerlinsley]

So this has mostly to do with the custom routing setup. Your parent route is rendering a getRouteProps component even when the child component is present. In RS, getRouteProps you'll notice is not officially bound to the route it is nested in, but instead is bound to the current path of the app.

The recommended approach to this is problem is to pass the works as a named prop to both routes. Then, in your works/ component, you will use the works prop, and in your work component you will use the work prop. Thus getRoutesProps will always supply the least amount of data need for the current route your a rendering.

You might think "but that's duplicated data! will it make my site slow?". Nope! By using the same works variable in all of the routes, it will be built as a shared asset json file, and your site's performance won't be affected at all.

Here is an example of what you could do:

const works = filterLanguage(JSON.parse(JSON.stringify(works)), lang)
...
{
   path: `/${lang}/works`,
   getProps: () => ({
      works,
   }),
   children: works.works.map(work => ({
       path: `/${work.slug}`,
       getProps: () => ({
           works,
           work: filterLanguage(Object.assign({}, {labels: works.labels}, work), lang),
       }),
   }))
},

const Work = getRouteProps(({ work }) => (
  <div>This is a work! {work}</div>
))

const Works = getRouteProps(({ works }) => (
  <div>
    <div>My works! {works}</div>
    <Route path="/works/:workID" component={Work} />
  </div>
))

[pbgms]

@tannerlinsley thanks for reply! Got it.

[easherma]

@tannerlinsley FYI for others who stumble on this, getRouteProps is renamed to withRouteData, no?