gpt4 book ai didi

deployment - Gatsby 动态路由在 gh-pages 部署时中断

转载 作者:行者123 更新时间:2023-12-04 03:51:10 31 4
gpt4 key购买 nike

我将我的第一个 Gatsby 项目部署到 github 页面:
repo :https://github.com/michal-kurz/stfuandclick
gh-页面:https://michal-kurz.github.io/stfuandclick/app/ (从 gh-pages 分支生成)
它只有一页,src/pages/app.tsx , 使用 Reach Router用于动态路由。

// app.tsx
const App = () => (
<>
<GlobalStyles />
<Provider store={store}>
<ThemeProvider theme={theme}>
<Router>
<Homepage path={`${BASE_URL}/app/`} />
<Team path={`${BASE_URL}/app/team/:teamName/`} />
</Router>
</ThemeProvider>
</Provider>
</>
)
// gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^\/app/)) {
page.matchPath = '/app/*'
createPage(page)
}
}

备注 : BASE_URL等于 /stfuandclick在生产环境版本和 ''在其他环境中
在开发模式( gatsby develop )下一切正常,但在部署版本上,无法访问 /team/:teamName不使用 /app/作为应用程序的入口点(转到 /app/ 并单击蓝色按钮工作正常)。
开通 /team/:teamName链接直接导致 404(除非之前通过访问它被缓存 /app/ ,但随后 ctrl + f5 再次导致 404)。
好像 gatsby.node.js部署应用程序后无法正常工作。我最初怀疑它根本不起作用,但显然事实并非如此,因为注释所有代码会进一步破坏应用程序(团队页面在通过来自 /app 的链接访问时突然收支平衡)。
我尝试在 gatsby-node.js 中添加路径前缀与 BASE_URL在生产构建中,如下所示:
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^\/stfuandclick\/app/)) {
page.matchPath = '/stfuandclick/app/*'
createPage(page)
}
}
并在 gatsby-node.js 中为两条路径中的每一条添加前缀个人,但没有运气。
我有 pathPrefix在我的 gatsby-config.json : ( full config here )
module.exports = {
pathPrefix: '/stfuandclick',
// ...
}
我使用以下 yarn 脚本进行部署:( full package.json here )
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
我该怎么做才能使我的路由正常工作?

最佳答案

我在处理 vickywords 时遇到了类似的问题.我在 Vercel 上托管了我的网站。基本上,服务器试图通过路径 dynamic-route/param/ 来定位文档。并且它不知道动态路由。所以它抛出了 404 错误。
为了解决这个问题,我必须在我的源代码中进行 2 处更改。

  • 在 404.js 文件中,我进行了以下更改以消除 404 闪烁。就我而言,我在浏览器控制台中看到了 404 错误。 source
  • const browser = typeof window !== "undefined" && window; return browser && <NotFoundPage />;
  • 在 vercel.json 文件中,我必须添加重定向到根页面,如下所示。
  • { "rewrites": [{ "source": "/word-finder/(.*)", "destination": "/word-finder" }] }我注意到一个问题, word-finder page 是我的动态路由的根页面,带有一些文本。当用户搜索某些内容时,我只需使用将呈现动态内容的参数重定向到同一页面。在看到实际内容之前,我看到了带有文本的根页面闪烁。
    我相信这是由于该 URL 重定向。
    笔记:
    如果有人在使用 Netlify,他们可以在 _redirect 中添加相同的行为。文件。确保将其放入 static文件夹,以便在部署后将其复制。

    关于deployment - Gatsby 动态路由在 gh-pages 部署时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64412745/

    31 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com