1

按照官方指南，应该是这样的简单：

//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 文件是从基本模板中剪切下来的。只有到关于页面的路线：

//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()没有被调用，但我不知道为什么。

该站点全部由静态页面组成，可从站点中的任何页面访问，因此我认为如果我将所有内容都放入配置文件中，它将分割代码，每个模板一页，并提供构建菜单的信息。我也不熟悉静态反应构建，所以可能没有像我想象的那样使用模板。

4

0 回答 0