reactjs - 反応静的によってビルドされたアプリケーションの static.config.js ファイルで定義されたルートからメニューをレンダリングする方法は?

Question

公式ガイドに従って、次のような単純なものにする必要があります。

//App.js
import React from 'react'
import { useRouteData } from 'react-static'

const { myRoutes} = useRouteData()

function App() {
  console.log(myRoutes.length)
  return (
    <div>
      <h1>My page list</h1>
      <ul>
        {myRoutes.map(item => (
          <li key={item.path}>{item.template}</li>
        ))}
      </ul>
    </div>
  )
}

export default  App

以下の私の static.config.js ファイルは、基本テンプレートから切り取られました。Aboutページへのルートのみがあります：

//static.config.js
import path from 'path'

export default {
  getRoutes: async () => {
    return [
    // A simple route
    {
      path: 'about',
      template: 'src/pages/about',
    },
  ]
  },
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
  ],
}

しかし、何もレンダリングされません。

myRoutes 変数をインラインで設定すると機能します。例：

   const myRoutes = [{"path":"p1","template":"t1"}]

関数useRouteData()が呼び出されていないようですが、その理由がわかりません。

サイトはすべて静的ページで構成されており、サイト内のどのページからでも利用できます。構成ファイルにすべてを入れると、テンプレートごとに 1 ページのコードが分割され、メニューを構築するための情報も提供されると思います。私も static-react ビルドに慣れていないので、想定どおりにテンプレートを使用していない可能性があります。