Question

在生产版本中设置路由存在一些问题（gatsby构建）这是在控制台中弹出的内容：

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

       5 |          function __webpack_require__(moduleId) {
       6 | 
    >  7 |                  // Check if module is in cache
         | ^
       8 |                  if(installedModules[moduleId]) {
       9 |                          return installedModules[moduleId].exports;
      10 |                  }


      WebpackError: C:\Users\Elephate2018\Desktop\lllllliililiililii\GATSBY3\GatsbyPage\public\:news\:title contains invali  d WIN32 path characters.

在开发版本中，一切都令人担忧，但是当我尝试使用gatsby构建生产版本（gatsby构建）时，会出现此错误。

路由代码

src / routes / index.js

const path = require('path')

const routes = {
  home: {
    path: '/',
    component: path.resolve(__dirname, 'home.js')
  },
  UsaToday: {
    path: '/UsaToday',
    component: path.resolve(__dirname, 'UsaToday.js')
  },
  Time: {
    path: '/Time',
    component: path.resolve(__dirname, 'Time.js')
  },
  Details: {
    path: '/:news/:title',
    component: path.resolve(__dirname, 'details.js')
  }
}

// Same keys as 'routes', but the value is only the path.
const paths = Object.keys(routes).reduce((acc, route) => {
  acc[route] = routes[route].path
  return acc
}, {})

module.exports =  { routes, paths }

gatsby-node.js

const { routes } = require('./src/routes')

exports.createPages = ({ actions }) => {
  console.log(actions)
  const { createPage } = actions
  Object.keys(routes).forEach(route => createPage(routes[route]))
}

Answer 1

Gatsby不像生成静态页面时那样接受路径中的参数-您需要遍历数据列表并自行生成路径。请查看createPage文档以获取示例。

或者，您必须在客户端设置这些路径-在这种情况下，请查看Gatsby浏览器API的文档，也许您正在寻找onRouteUpdate hook。

Gatsby包含无效的WIN32路径字符

1 个答案: