Question

问题摘要：一种。我想使用路径在盖茨比动态生成页面。我已经实现了此question中建议的技术。该技术在本地即本地主机上有效，但是当我在生产环境中部署它时，出现以下错误消息：

找不到页面看来您跟随了一个损坏的链接或输入了一个此网站上不存在的URL。

预期结果：动态创建页面后，@ reach / router应该能够捕获路径中的ID并将其用作组件中的道具。

实际结果：这在本地有效，但在生产环境中，浏览器向我抛出上述错误。控制台错误：

无法加载资源：服务器的状态为404（）

到目前为止我尝试了什么？

在gatsby-node.js中：

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;


  if (page.path.match(/^\/resetpassword/)) {
    page.matchPath = "/resetpassword/*"

    createPage(page)
  }
}

在Gatsby页面中的resetpassword.js：

export default function ResetPassword() {
  return (
    <div>
      <Router basepath="/">
        <ResetWorker path="/resetpassword/:id" />
      </Router>
    </div>
  )
}

function ResetWorker({ id }) {

// Here I need to access the id to make a fetch call to my node.js backend

  return()
}

Answer 1

这对某人可能有用。这是根据此question的答案解决问题的方法。 1.我安装了Gatsby Netlify插件：gatsby-plugin-netlify 2.将gatsby-plugin-netlify添加到gatsby-config.js的插件数组中。 3.使用以下规则在我的Gatsby项目的根目录下创建_redirects文件： / resetpassword / * /resetpassword/index.html 200

所需页面是动态生成的。谢谢ksav的建议。

动态路径在本地有效，但不适用于生产

1 个答案: