Document's state doesn't have routeInfo, siteData nor renderMeta

Per documentation, Document component would get the state object that contains routeInfo, but it is not provided. Nor are the other 2 defined in the docs. This is what is provided inside state:

{ version: undefined,
  configPath: undefined,
  name: undefined,
  template: undefined,
  staging: undefined,
  debug: undefined,
  incremental: undefined,
  analyze: undefined,
  isCLI: true,
  packageConfig: {},
  stage: 'dev',
  originalConfig: '/Users/nickyjay/Projects/id-residence/static.config.js',
  plugins:
   [ { location:
        '/Users/nickyjay/Projects/id-residence/node_modules/react-static-plugin-reach-router',
       nodeLocation: null,
       browserLocation:
        '/Users/nickyjay/Projects/id-residence/node_modules/react-static-plugin-reach-router/browser.api.js',
       options: {},
       hooks: {} },
     { location:
        '/Users/nickyjay/Projects/id-residence/plugins/react-static-plugin-postcss',
       nodeLocation:
        '/Users/nickyjay/Projects/id-residence/plugins/react-static-plugin-postcss/node.api.js',
       browserLocation: null,
       options: {},
       hooks: [Object] },
     { location:
        '/Users/nickyjay/Projects/id-residence/node_modules/react-static-plugin-sitemap/dist',
       nodeLocation:
        '/Users/nickyjay/Projects/id-residence/node_modules/react-static-plugin-sitemap/dist/node.api.js',
       browserLocation: null,
       options: {},
       hooks: [Object] },
     { location: '/Users/nickyjay/Projects/id-residence',
       nodeLocation: null,
       browserLocation: null,
       options: {},
       hooks: {} } ],
  config:
   { getSiteData: [Function: getSiteData],
     prefetchRate: 5,
     maxThreads: Infinity,
     disableRoutePrefixing: false,
     outputFileRate: 100,
     extensions: [ '.js', '.jsx' ],
     getRoutes: [Function: getRoutes],
     minLoadTime: 200,
     disablePreload: false,
     disableRuntime: false,
     preloadPollInterval: 300,
     productionSourceMaps: false,
     entry: 'index.js',
     Document: [Function: Document],
     plugins:
      [ 'react-static-plugin-reach-router',
        'react-static-plugin-postcss',
        'react-static-plugin-sitemap',
        '/Users/nickyjay/Projects/id-residence' ],
     siteRoot: '',
     paths:
      { ROOT: '/Users/nickyjay/Projects/id-residence',
        SRC: '/Users/nickyjay/Projects/id-residence/src',
        DIST: '/Users/nickyjay/Projects/id-residence/tmp/dev-server',
        ASSETS: '/Users/nickyjay/Projects/id-residence/tmp/dev-server',
        PLUGINS: '/Users/nickyjay/Projects/id-residence/plugins',
        TEMP: '/Users/nickyjay/Projects/id-residence/tmp',
        ARTIFACTS: '/Users/nickyjay/Projects/id-residence/artifacts',
        PUBLIC: '/Users/nickyjay/Projects/id-residence/public',
        NODE_MODULES: '/Users/nickyjay/Projects/id-residence/node_modules',
        EXCLUDE_MODULES: '/Users/nickyjay/Projects/id-residence/node_modules',
        PACKAGE: '/Users/nickyjay/Projects/id-residence/package.json',
        HTML_TEMPLATE:
         '/Users/nickyjay/Projects/id-residence/tmp/dev-server/index.html',
        STATIC_DATA:
         '/Users/nickyjay/Projects/id-residence/tmp/dev-server/staticData' },
     basePath: '',
     publicPath: '/',
     assetsPath: '',
     extractCssChunks: false,
     inlineCss: false,
     babelExcludes: [],
     devServer: { host: 'localhost', port: 3000 },
     terser: { terserOptions: [Object] } } }

It also says that routeInfo is an object which is All of the current route's information, including any routeData. This gives me an impression that Document should be called multiple times for each route and provide routeInfo for each route. Not only that it doesn’t provide routeInfo object, it is also not called more than once.

My goal was to define different head data depending on the route I was on at that time. I got that idea from this project https://github.com/nathanpower/wordflow-site which unfortunately doesn’t work at the moment. Still, you would be able to console.log Document data while starting that project and it will also log just once.

Environment

node 10.16. yarn 1.16. Mac OS Mojave 10.14.5

Expected Behavior

I was expecting to get routeInfo provided inside state and hopefully have the info about what route I was on at that moment and then populate Head data depending on a route. I was expecting to have route data or at least a path. Also, I would expect it to be called for each route.

Workaround

For now, I can just set static meta data inside Document, but the one that is dependent on the route, I’m setting per component that is rendered by that route. This of course works, but I feel it would be better to have all the data inside Document.

[MikeyParton]

Hi, I came across this issue while trying to find a centralised spot to put common meta tags that depend on route data. I found that Instead of repeating the logic in each route component, you can use the Routes render prop for custom route rendering as explained here: https://github.com/react-static/react-static/blob/master/docs/api.md#custom-routes-rendering

So I have a SharedHead component that calls useRouteData and you can include that inside your router like this.

<Router>
  <Routes
    path="*"
    render={({ routePath, getComponentForPath }) => {
      const element = getComponentForPath(routePath);
      return (
        <Fragment>
          <SharedHead />
          {element}
        </Fragment>
      );
    }}
  />
</Router>

Seems to work ok. Hopefully this helps someone

[mamadOuologuem]

FYI: It looks like routeInfo is being passed to the Document’s state during the build process.