Gatsby动态路由在gh页部署时中断 [英] Gatsby dynamic routing breaks upon gh-pages deploy

问题描述

我将第一个Gatsby项目部署到github页面:
回购: https://github.com/michal-kurz/stfuandclick
gh页: https://michal-kurz.github.io/stfuandclick/app/(从 gh-pages 分支生成)

它有一页 src/pages/app.tsx ，使用到达路由器用于动态路由.

 //app.tsxconst App =()=>(<>< GlobalStyles/>< Provider store = {store}>< ThemeProvider theme = {theme}><路由器><首页路径= {`$ {BASE_URL}/app/`}/>< Team path = {`$ {BASE_URL}/app/team/:teamName/`}/></路由器></ThemeProvider></Provider></>) 

 <代码>//gatsby-node.jsexports.onCreatePage =异步({页面，操作})=>{const {createPage} =操作如果(page.path.match(/^ \/app/)){page.matchPath ='/app/*'createPage(页面)}} 

注释: BASE_URL 等于生产环境版本中的/stfuandclick ，其他环境中的''>

一切在开发模式()下都可以正常工作，但是在已部署的版本上，如果不使用/，就无法访​​问/team/:teamName app/作为应用的入口点(进入/app/并单击蓝色按钮可以正常工作.)

打开/team/:teamName 链接会直接导致404(除非以前是通过/app/访问它进行缓存的，但是ctrl + f5会再次生成404).

At似乎一旦部署了应用程序， gatsby.node.js 都无法正常工作.我最初怀疑它根本不起作用，但显然不是这样，因为注释掉所有代码会进一步破坏应用程序(团队页面在通过/app ).

我尝试在生产版本中以 BASE_URL 为 gatsby-node.js 中的路径添加前缀，如下所示:

  exports.onCreatePage = async({page，actions})=>{const {createPage} =操作如果(page.path.match(/^ \/stfuandclick \/app/)){page.matchPath ='/stfuandclick/app/*'createPage(页面)}} 

，并且分别在 gatsby-node.js 中的两个路径中分别添加前缀，但是没有运气.

我的 gatsby-config.json 中确实有 pathPrefix :( 完整软件包.json在这里)

 "deploy":"gatsby build --prefix-paths&&gh-pages -d public" 

我该怎么做才能使路由正常工作?

解决方案

在处理 vickywords .我将网站托管在Vercel上.基本上，服务器尝试通过路径 dynamic-route/param/定位文档，并且它不知道动态路由.因此它会引发404错误.

要解决此问题，我必须在源代码中进行2次更改.

1. 在404.js文件中，我进行了以下更改以消除404闪烁.就我而言，我在浏览器控制台中看到404错误.来源

const browser = typeof window！==未定义"&&窗口；

返回浏览器&&< NotFoundPage/> ;;

2. 在vercel.json文件中，我必须将重定向添加到根页面，如下所示.

{重写" :: [{源":"/word-finder/(.*)"，目标":"/word-finder"；}]}

我注意到一个问题，单词查找器页面是我动态页面的根页面带有一些文字的路线.当用户搜索某些内容时，我只需使用将呈现动态内容的参数重定向到同一页面.在看到实际内容之前，我看到带有文字的根目录页面开始闪烁.我相信这是由于该URL重定向所致.

注意:如果有人在使用Netlify，他们可以在 _redirect 文件中添加相同的行为.确保将其放在 static 文件夹中，以便在部署后将其复制.

I deployed my first Gatsby project to github pages:
repo: https://github.com/michal-kurz/stfuandclick
gh-pages: https://michal-kurz.github.io/stfuandclick/app/ (generated from gh-pages branch)

It has one page, src/pages/app.tsx, which uses use Reach Router for dynamic routing.

// 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)
  }
}

note: BASE_URL equals to /stfuandclick in production env version and '' in other envs

Everything works fine in development mode (gatsby develop), but on the deployed version, it is impossible to visit /team/:teamName without using /app/ as the app's entry point (going to /app/ and click the blue button works fine).

Opening the /team/:teamName link directly results in a 404 (unless previously cached by visiting it through /app/, but then ctrl + f5 results in 404 again).

At seems as if gatsby.node.js isn't doing it's job properly once app is deployed. I initialy suspected that it does't work at all, but apparently that's not the case, as commenting all the code out breaks the app even further (the team pages suddenly break even upon visited via link from /app).

I tried prefixing the paths in gatsby-node.js with BASE_URL in the production build like so:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/stfuandclick\/app/)) {
    page.matchPath = '/stfuandclick/app/*'
    createPage(page)
  }
}

and also prefixing each of the two paths in gatsby-node.js individually, but with no luck.

I do have pathPrefix in my gatsby-config.json: (full config here)

module.exports = {
  pathPrefix: '/stfuandclick',
  // ...
}

and I deploy with the following yarn script: (full package.json here)

"deploy": "gatsby build --prefix-paths && gh-pages -d public"

What can I do to make my routing work?

解决方案

I faced a similar issue while working on vickywords. I hosted my site on Vercel. Basically, the server is trying to locate the document by path dynamic-route/param/ and it is not aware of dynamic routes. So it is throwing a 404 error.

To fix that, I had to make 2 changes in my source code.

1. In the 404.js file I made the below changes to get rid of 404 flashing. In my case, I was seeing a 404 error in the browser console. source

const browser = typeof window !== "undefined" && window;

return browser && <NotFoundPage />;

2. In vercel.json file I had to add redirects to the root page like below.

{ "rewrites": [{ "source": "/word-finder/(.*)", "destination": "/word-finder" }] }

There is one issue I noticed, word-finder page is the root page for my dynamic route with some text. When a user searches for something, I simply redirect to the same page with parameters that will render dynamic content. I see the flashing of my root page with text before seeing the actual content. I believe it is due to that URL redirect.

Note: If anyone is using Netlify, they can add the same behavior in the _redirect file. Make sure to put it in the static folder so that it will get copied after deployment.

这篇关于Gatsby动态路由在gh页部署时中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！