Gatsby: 클라이언트 측 라우팅을 비활성화 하시겠습니까?

서버가 어떤 경로를 렌더링하는지 왜 모르십니까?

경로를 알지 못하는 것보다 적지 만 (그와 일치하는 정규식을 작성할 수 있음) 겹치는 부분이 더 많습니다. 실제 설정은 gatsby 사이트를 포함하여 여러 다른 앱으로 프록시를 리버스하는 아파치 서버 뒤에 있습니다. 이러한 앱을 사용할 수 없게되거나 내부 서버 오류가 반환되면 gatsby 사이트의 일부인 사용자 지정 오류 페이지를 반환합니다.

따라서 언제든지 app1을 사용할 수 없거나 제대로 작동하지 않는 경우 / app1에 대한 모든 요청은 /error/unavailable.html 또는 /error/internal.html의 내용을 반환하고 app2에 대해서도 마찬가지입니다. .

사용 matchPath 와 같은 /^(app1|app2)/.*/ 있기 때문에, 모두 사용할 수없는 내부 오류 페이지에하지가하는 일을 findPage 모르는 실제로 의도하는 페이지 (URL을 기준) 사용자에게 보여줍니다.

전역 변수를 사용하고 ___loader 에서 onClientEntry ___history 및 ___loader "패칭"을 사용하여 작업을 수행 할 수있었습니다. 개츠비에 대한 의존성이 이러한 전역을 노출하기 때문에 매우 취약합니다. 이것을 일반화하고 개츠비에 추가 할 방법이 있는지 확실하지 않습니다.

• 패치 기록은 props.location.pathname 사용하여 호출을 포착합니다.
  component-renderer.js # L18-L28

• 패치 로더는 window.location.pathname 의 직접적인 사용을 포착합니다.
  production-app.js # L155

// gatsby-browser.js
exports.onClientEntry = () => {
  // Check for a custom pathname
  const pathname = global.___pathname
  if (!pathname) return

  // Override the history location
  const history = global.___history
  history.location.pathname = pathname

  // Patch the resource loader
  const loader = global.___loader
  const { getResourcesForPathname } = loader

  loader.getResourcesForPathname = (path, ...args) => {
    return getResourcesForPathname(path === location.pathname ? pathname : path, ...args)
  }
}

// src/pages/page1.js
import React from "react"
import Helmet from 'react-helmet'

export default () => (
  <div>
    <Helmet>
      <script>{`window.___pathname = '/page1'`}</script>
    </Helmet>
    <div>Page 1!</div>
  </div>
)

또한이 기능을 비활성화하는 빌드 옵션이 있어야한다는 데 동의합니다. 우리는 또한 틀에 얽매이지 않는 설정을 가지고 있으며 전체 Gatsby 사이트로의 마이그레이션을 완료하는 동안이 기능을 일시적으로 비활성화하고자합니다.

빌드시 간단한 플래그가 완벽합니다.

이건 어때? 이것에 대한 해결책이 있습니까?

우리는 필요한 경로와 일치하도록 pages.json을 수정했습니다. 우리는 수정 된 경로 이름으로 addPagesArray라는 이름을 기본적으로 할당합니다.

왜 이것이 오류가 발생하는지 이해하지 못합니까? 페이지가 제대로로드되고 작동합니다. 경로와 일치 할 수없는 경우 기껏해야 경고가됩니다.

즉, 구성 대 런타임 코드를 통해 pages.json을 수정하는 더 우아한 방법이 있는지 모르겠습니다.

이 문제를 해결하고 싶습니다.

내가 작업중인 프로젝트에서 비슷한 문제가 발생합니다. 단일 페이지 Gatsby 앱을 구축 할 랜딩 페이지 생성기를 구축하고 있습니다. 이 문제는 도메인 외부에 방문 페이지를 제공하려고 할 때 발생합니다.

예를 들어 메인 Gatsby 앱 www.example.com 있습니다. Gatsby 랜딩 페이지를 가져와 www.example.com/trial 제공하는 서비스가 있습니다. 따라서 랜딩 페이지 URL은 www.example.com/trail/ad-123 와 같습니다. 모든 JS가로드되고 라우터가 인계 할 때까지 페이지는 처음에 정상적으로로드됩니다. 랜딩 페이지는 경로를보고 위치를 알지 못하므로 www.example.com/ad-123 와 같이 루트에 페이지를 배치하도록 경로를 변경하려고 시도합니다. 그러면 404 리디렉션이 발생합니다.

이 문제를 해결하기 위해 구성 가능한 옵션을 추가 할 계획이 있습니까? Gatsby 팀이 PR에 개방되어 있습니까?

@ alex-greco-harrys 경로 접두사 가 해당 시나리오에서 사용하려는 것 같습니다.

또한 내 웹 사이트에서 Google Adsense를 제대로 실행하기 위해 클라이언트 측 라우팅을 비활성화해야했습니다.

Google Adsense 자동 광고는 클라이언트 측 라우팅을 감지하지 않으며 경로가 업데이트 될 때 광고가 새로 고침되지 않습니다.

어쨌든 클라이언트 측 라우팅을 비활성화 할 수 있습니까?

이와 같은 경우 gatsby-link 대신 a 태그를 사용할 수 있습니다.

전역 변수를 사용하고 ___loader 에서 onClientEntry ___history 및 ___loader "패칭"을 사용하여 작업을 수행 할 수있었습니다. 개츠비에 대한 의존성이 이러한 전역을 노출하기 때문에 매우 취약합니다. 이것을 일반화하고 개츠비에 추가 할 방법이 있는지 확실하지 않습니다.

• 패치 기록은 props.location.pathname 사용하여 호출을 포착합니다.
  component-renderer.js # L18-L28
• 패치 로더는 window.location.pathname 의 직접적인 사용을 포착합니다.
  production-app.js # L155

// gatsby-browser.js
exports.onClientEntry = () => {
  // Check for a custom pathname
  const pathname = global.___pathname
  if (!pathname) return

  // Override the history location
  const history = global.___history
  history.location.pathname = pathname

  // Patch the resource loader
  const loader = global.___loader
  const { getResourcesForPathname } = loader

  loader.getResourcesForPathname = (path, ...args) => {
    return getResourcesForPathname(path === location.pathname ? pathname : path, ...args)
  }
}

// src/pages/page1.js
import React from "react"
import Helmet from 'react-helmet'

export default () => (
  <div>
    <Helmet>
      <script>{`window.___pathname = '/page1'`}</script>
    </Helmet>
    <div>Page 1!</div>
  </div>
)

@TuckerWhitehouse 어디에서 ___history , ___loader 를 받으시 나요? 예제를 복제하려고 할 때 global의 두 속성은 undfined 입니다.

@ alex-greco-harrys 경로 접두사 가 해당 시나리오에서 사용하려는 것 같습니다.

@ jgierer12 내 문제의 첫 번째 부분을 해결하는 데 도움이됩니다. 두 번째 부분은 페이지가 렌더링 될 때까지 최종 경로를 알 수 없다는 것입니다. 정적 페이지 모음을 가져와 전환율에 따라 제공하는 학습 서비스가 있습니다. 따라서 example.com/go/ 경로에서 페이지 모음 중 하나를 제공 할 수 있습니다. 따라서 example.com/go/first-page 또는 example.com/go/second-page 와 같은 경로에 페이지를 제공하지 않습니다. 둘 다 example.com/go/page 경로에서 제공됩니다.

본질적으로 내가 달성하려는 것은 내가 원하는 경로에서 개츠비 페이지를 제공하는 것입니다.

@ alex-greco-harrys 그 글로벌은 gatsby v1에 의해 노출되었습니다. v2로 업그레이드하면서 기본 라우터가 react-router에서 reach-router로 전환되었다는 것을 알고 있으므로 이러한 전역이 영향을 받았을 것입니다.

또한 Gatsby를 사용하여 단일 페이지 애플리케이션을 빌드하고 라우팅을 완전히 비활성화하고 싶습니다. 누구든지 V2와 호환되는 해결 방법 ( @TuckerWhitehouse 's)을 알고 있습니까?

최신 정보:
클라이언트 측 라우팅을 _disable_하는 솔루션을 찾을 수 없었지만 다음을 설정하여 @ alex-greco-harrys 및 다른 사용자가 참조하는 리디렉션을 방지 할 수있었습니다.

window.page = window.page || {};
window.page.path = window.location.pathname;

production-app.js 에서이 조건부 검사를 단락시키는 gatsby-browser.js에서. 이 조건부 리디렉션은 "정규 경로를 실제 경로와 일치하도록 만들기"를 시도하고 위에서 언급 한 예상치 못한 (IMO) 동작을 발생시킵니다.

이것도 필요합니다.

현재 다른 프로젝트에서 Gatsby가 생성 한 코드를 사용하고 있으며 여러 페이지에서 사용하고 있습니다. 정적 코드를 생성 할 때 Gatsby를 사용하고 있습니다. 따라서 저는 pathPrefix 를 사용하여 특정 경로에 모든 것을 생성하고 제공 할 수있었습니다. 그렇게하면 모든 것이 거기에서 요청 된 다음 페이지 조각으로 렌더링됩니다. 그러나 스크립트에 있기 때문에 항상 원치 않는 리디렉션이 pathPrefix 됩니다. 빌드 할 때마다 @ethagnawl이 언급 한 조건을 수동으로 제거해야합니다. 나는 그의 해결책을 시도했지만 그것은 나를 위해 작동하지 않았습니다.

또한 Gatsby를 사용하여 단일 페이지 애플리케이션을 빌드하고 라우팅을 완전히 비활성화하고 싶습니다. 누구든지 V2와 호환되는 해결 방법 ( @TuckerWhitehouse 's)을 알고 있습니까?

최신 정보:
클라이언트 측 라우팅을 _disable_하는 솔루션을 찾을 수 없었지만 다음을 설정하여 @ alex-greco-harrys 및 다른 사용자가 참조하는 리디렉션을 방지 할 수있었습니다.

window.page = window.page || {};
window.page.path = window.location.pathname;

production-app.js 에서이 조건부 검사를 단락시키는 gatsby-browser.js에서. 이 조건부 리디렉션은 "정규 경로를 실제 경로와 일치하도록 만들기"를 시도하고 위에서 언급 한 예상치 못한 (IMO) 동작을 발생시킵니다.

@ethagnawl 모든 URL에서 제공 할 수있는 단일 페이지 앱을 생성하는 해키 종류의 솔루션이 있습니다. 단일 페이지 란 실제로 라우팅이 전혀없는 단일 페이지를 의미합니다.

다음 Gatsby 예제를 보면 https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths .

15 행 에서이 파일 을 <Page path="/*" {...props} /> 처럼 보이도록 편집하고 16 행을 삭제할 수 있습니다.이 응용 프로그램을 빌드 할 때 모든 경로는 정의한 Page 를 제공하게됩니다. 거기에서 Page 원하는대로 만들 수 있습니다. 이제 임의의 경로에서이 페이지를 호스팅해야하는 경우 리디렉션이 표시되지 않습니다.

이 솔루션이 앱의 여러 페이지에서 어떻게 작동하는지 알 수 없었습니다. 내 프로젝트의 목표는 내가 원하는 모든 URL에서 단일 Gatsby 페이지 (마케팅 랜딩 페이지)를 제공하는 것이 었습니다.

이것이 귀하의 사용 사례에 도움이되는지 확실하지 않지만 향후 발견을 촉진 할 수 있습니다!

문서의 html.js 사용자 지정 지침에 따라 {this.props.postBodyComponents} 제거하여이를 수행 할 수있었습니다.

https://www.gatsbyjs.org/docs/custom-html/

이 스레드가 계속 활성화되는 정도에 따라이 동작을 원하는 사용자 수가 적지 않은 것 같습니다.

내가 원하는 (: 빨리하려면 내 사용 사례를 반복 했다! 정적의 _site_ 발생기에 반대 - - 정적의 _page_ 발생기로 개츠비를 사용하고 개츠비 "페이지가"되었더라도 포함 된 페이지에 주입되기 때문에 URL은 부족) 내 제어권과 변경 될 수 있으므로 Gatsby 애플리케이션이 URL을 _ever_ 엉망으로 만들고 싶지 않습니다. 기본적으로 Gatsby _mostly_는이 사용 사례를 지원하고 사용하기 매우 즐겁지만, 표준 정적 _site_ 사용 사례 때문에 언급 한 것과 같은 해킹이 필요하다는 몇 가지 가정을합니다. 위.

그렇다면 클라이언트 측 라우팅이 최상위 구성 옵션이되지 않도록하는 기능에 대한 희망이 있습니까? PR을 제출해 주시면 감사하겠습니다. 그러나 승인 될 가능성이 없다면 시간을 낭비하고 싶지 않습니다.

이것은 @ethagnawl을 추가하는 합리적인 기능인 것 같습니다. 저는 dangeouslySetInnerHTML과 같은 매우 길고 불쾌한 이름이 필요하다고 생각하므로 사람들은 매우 특별한 경우이기 때문에 자신이하는 일을 완전히 인식 할 수 있습니다.

이 문제를 다루는 PR에서의 첫 번째 패스는 여기 에서 찾을 수

aPR @ethagnawl 을 만들어 주셔서 감사합니다.

다음이 작동하지 않는 이유를 다시 상기시켜 주시겠습니까?

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions;
  page.matchPath = `${page.path}*`;
  createPage(page);
};

@wardpeet 나는 그것이 작동하고 위에서 언급 한 솔루션 과 비슷하게 보일 것이라고 확신합니다. 그러나 이러한 종류의 솔루션은 문서화하기 어렵고 잠재적으로 취약합니다 (더 이상 작동하지 않는 @TuckerWhitehouse에서 제공 하는 솔루션 참조).

IMO,이 개념을 코드화하는 것은 문서화를보다 간단하게 만들고이 플래그를 사용하여 우회 / 누핑 등을 통해 추가 최적화를 수행 할 수 있기 때문에 가치가 있습니다. Gatsby가 이러한 방식으로 사용될 때 관련이없는 기능.

또한 matchPath 하려면 렌더링하려는 페이지를 반영하는 브라우저의 URL이 필요하지만 알 수없는 위치에 개츠비 사이트를 삽입 할 때 문제가 발생합니다. (내 원래 문제는 아파치 역방향 프록시 뒤에 개츠비가 있고 특정 페이지가 렌더링되는 경로를 알지 못하는 것입니다).

@ethagnawl 페이지 수준 ( page.__disable_client_side_routing__ = true 같은)에서 라우팅을 비활성화 할 수 있다고 생각하십니까? 이것은 아마도 내가 가지고 있던 원래 문제를 해결할 것입니다.

페이지 수준에서 라우팅을 비활성화 할 수 있다고 생각하십니까?

왜 안되는지 모르겠어요? 이것이 제가 제안한 솔루션에 추가되거나 대체됩니까? 후자의 경우 페이지 수준에서 수행하는 것이 어떤 이점이 있습니까?

이 저장소를 설정했습니다. :)
https://github.com/wardpeet/gatsby-plugin-static-site

이것이 귀하의 사용 사례에 적합한 지 확실하지 않습니다.
지금은해야 할 일

git clone https://github.com/wardpeet/gatsby-plugin-static-site
npm install
npm run build
npm link

cd "into your project"
npm link gatsby-plugin-static-site

gatsby-config.js에 gatsby-plugin-static-site 추가

이것이 귀하의 사용 사례에 적합한 지 알려주십시오. 실제로 지원할 의사가 없으므로 기꺼이 전송하겠습니다.

gitignore 파일에 문제가있어 저장소를 업데이트했습니다 (@ m-allanson에게 감사드립니다). 나는 또한 내 이름으로 npm에 게시했습니다.

그래서 설치를 할 수 있습니다

npm install --save @wardpeet/gatsby-plugin-static-site

gatsby-config.json에 @wardpeet/gatsby-plugin-static-site 추가

이것이 좋아 보인다면 개발을 위해이 동작을 비활성화하는 몇 가지 테스트와 옵션을 추가 할 수 있습니다.

히야!

이 문제는 조용해졌습니다. 무시 무시한 조용함. 👻

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.

이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.

Gatsby 커뮤니티의 일원이되어 주셔서 감사합니다! 💪💜

검토 대기중인 것처럼 보이기 때문에 계속 열려 있기를 바랍니다.

오래되지 않았는지 잘 모르겠습니다. 문제를 해결했으며 이에 대한 피드백을 받고 싶습니다.
https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment -470075540

아무도 응답하지 않으면 아마도 해결되었을 것이므로이 항목을 닫는 것이 좋습니다.

@wardpeet 플러그인으로 클라이언트 측 라우팅을 조건부로 비활성화 할 수 있습니까?

@wardpeet IIRC, 제안 된 수정 사항은이 기능을 Gatsby 구성 옵션으로 추가하는 프로세스의 첫 번째 단계입니다. 그래서 _sort of_는이 이슈와 Gatsby에 관한 한 밴드를 벗어납니다.하지만 저는이 이슈가 계속해서 대화를 계속하기 위해 열려 있어야한다고 주장 할 수 있습니다.

@wardpeet 원래 문제는 특정 경로에 대한 클라이언트 측 라우팅을 비활성화하는 것이 었습니다. @ ethagnawl 은 전체 사이트에 대한 라우팅을 비활성화하는 유스 케이스를 가져 왔습니다.

이전 CMS의 사이트를 Gatsby로 마이그레이션하는 동안 클라이언트 측 라우팅을 일시적으로 비활성화해야합니다. 스위치를 개츠비로 완전히 전환하기 전에 한 번에 한 페이지 씩 수행합니다.

@wardpeet 플러그인을 시도했지만 작동하지 않는 것 같습니다.

@brianbento 복제품이 있습니까? repo https://github.com/wardpeet/gatsby-plugin-static-site 에 문제를 만들 수 있다면 누락 된 내용을 볼 수 있습니다.

@wardpeet 내가 뭔가를 얻을 수 있는지 볼게요. 주요 문제는 이전에 언급 한 "수정"(https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment-465497418)이 pathPrefix를 사용할 때 작동하지 않는다는 것입니다. 항상 예상대로 주소를 "수정"합니다.

@brianbento 위에서 언급 한 해결책 을 시도해 보셨습니까? 그것은 두 가지 다른 프로젝트에서 저에게 잘 맞았습니다.

@ethagnawl 나는 여전히 URL 수정을 얻은 다음 경로 접두사를 두 배로 늘립니다.

그래서 "/"는"/가됩니다./"후 표준이 일치하지 않습니다.

아마도 내가 잘못 구현하고있을 것입니다. 페이지에 경로 접두사를 사용 했습니까? 정적 사이트 플러그인을 활성화해야합니까?

페이지에 경로 접두사를 사용 했습니까?

예. 나는 또한 이 분기를 사용하여 원격 자산을 허용했습니다. 그래서, 그 브랜치가 당신이 아닌 저를 위해 작동하는 행동을 도입 한 것은 _ 가능합니다 _.

그러나 최근의 Gatsby 릴리스 (내가 따라 가지 못한)가 내 "솔루션"을 깨 뜨렸을 가능성이 더 높습니다.

@ethagnawl 매우 유용합니다! 감사합니다! @DSchau 가 assetPrefix 기능을 테스트하기 위해 몇 가지 플러그인을 만들었다는 것을 알고 있습니다. 한 번해볼 게요!

경로 접두사를 사용해야 할 때 @wardpeet 솔루션이 작동하지 않는 것 같습니다. 표준 검사를 비활성화 한 __disable_client_side_routing__ 제안과 같은 솔루션을 갖는 것은 매우 멋질 것입니다. 병합을 고려할 경우 작업하고 PR을 제출하게되어 기쁩니다. 그 아이디어에 대한 지원이 있습니까? 아니면 로드맵에 맞지 않는다고 생각하십니까?

@xavivars 나는 그것을 원하고 확실히 유용하다고 생각합니다.

@xavivars 나는 잠시 전에 @wardpeet 의 솔루션에 찬성하여 마감되었습니다. 그 접근 방식을 다시 검토하려는 경우 제 시도를 살펴볼 가치가 있습니다.

감사합니다 @ethagnawl ! 나는 당신의 접근 방식을 살펴 보았고 그것은 내가 생각했던 것과 거의 같았습니다.

@wardpeet 솔루션은 다른 사용 사례를 다루고 있다고 생각합니다. 링크가 실제로 브라우저 location.href 변경하기 때문에 앱이 SPA로 작동하지 않으므로 "서버 측"을 탐색합니다. 하지만 초기 리디렉션이 여전히 발생하고 있기 때문에 내 사용 사례에서 작동하도록 만들 수 없습니다. 내 초기 가설은이 조건이 true 로 평가되도록하는 prefixPath 와 (와) 일종의 상호 작용이 있다는 것입니다.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/production-app.js#L65

제대로 작동하게 만들었습니까?

내가 고쳐야 할 것을 잊었 기 때문에 누군가가 나에게 실제 문제를 설명 할 수 있다면 나는 플러그인에서 더 많은 작업을 할 수있을 것이다. 아마도 이것의 대부분은 새로 병합 된 assetPrefix 옵션으로 해결할 수 있습니까?

이해하지 못해 죄송합니다.

뿡뿡

제대로 작동하게 만들었습니까?

내 해킹과 제출 된 PR은 모두 내 사용 사례에 대해 _ 제대로 작동했습니다. 리디렉션이없는 단일 정적 페이지 생성입니다. Gatsby 팀이 앱 수준 구성 옵션 대신 플러그인을 선호하는 것 같았 기 때문에 PR을 포기했습니다.

저는 @wardpeet 플러그인을 시도해 본 적이 없었습니다. 게시 당시 작업

@wardpeet : assetPrefix가 문제를 해결하지 않습니다. 플러그인 (기본적으로 클릭 할 때 클라이언트 측 "탐색"을 비활성화)과 몇 달 전에 @ethagnawl에서 언급 한 해결 방법을 모두 사용하여 작동하도록 관리했습니다.

https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment -453244611

onClientEntry 발생하는 "탐색"이벤트를 비활성화하려면 해당 해결 방법이 필요합니다. 거기에 후크를 추가하고 해당 해결 방법을 적용하는 문제를 수정했습니다 (page.path를 실제 경로로 강제 적용). 그러나 나는 그것이 부작용이 있는지, 그리고 그것이 작동을 멈출 때까지 얼마나 걸릴지 모른다 (핵 이상이 아니다).

이상적으로는 gatsby를 "정적 페이지 생성기"로 사용하는 사람들의 수를 감안할 때 이것이 앱 수준 구성이어야한다고 생각합니다.

@xavivars 공유 할 수있는 링크가 있습니까?

사실은 아니지만 이것은 거의 다입니다.

앞서 언급 한 정적 플러그인을 gastby-browser.js에 추가합니다.

exports.onClientEntry = () => {
    window.page = window.page || {};
    window.page.path = window.location.pathname;
}

다음도 작동하지만 gatsby 내부에 의존합니다.

export function onInitialClientRender() {
  window.___navigate = (to, { replace }) => {
    if (replace) {
      window.location.replace(to);
    } else {
      window.location.assign(to);
    }
  };
}

https://github.com/wardpeet/gatsby-plugin-static-site 및 assetPrefix 사용이 작동합니까?

예제가 실제로 필요한지 확실하지 않은 연결 문제.
https://github.com/wardpeet/gatsby-plugin-static-site/issues/1#issuecomment -494802726

나에게 그것은 세 가지 모두와 함께 작동했다 : gatsby 플러그인 정적 사이트 + assetPrefix + 위와 같이 "navigate"비활성화

여기에 무엇이 필요한지 아직 이해하기 어려운 것 같습니다. gatsby-plugin-static-site 및 assetPrefix로 문제를 해결할 수 있습니다.

@wardpeet gatsby-plugin-static을 사용하는 데모 링크가 있습니까?

@ethagnawl 기다리게 해서 죄송합니다.

데모를 만들었습니다.
https://github.com/wardpeet/gatsby-demos/tree/static-asset-prefix

사이트가 게시 됨 :
https://zen-wright-33c2d8.netlify.com/

예상대로 (및 @TuckerWhitehouse 및 @ethagnawl에 의해 예상 됨) https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment -453244611에 제공된 것과 같은 취약한 솔루션이 변경으로 인해 더 이상 작동하지 않습니다. Gatsby 2.9.2에서는 몇 가지 이유가 있습니다.

첫 번째로 해결할 수있는 것은
window.page.path = window.location.pathname;
대체해야합니다
window.pagePath = window.location.pathname;
URL 클라이언트 측의 변경을 방지하기 위해.

그러나 그것은 원치 않는 부작용이 있습니다. pagePath는 _wrong_ 경로로 설정되고 page-data.json은 더 이상로드되지 않습니다 (마지막으로 렌더링 된 경로가 아닌 페이지의 원래 경로에 의존하기 때문입니다).

https://github.com/gatsbyjs/gatsby/commit/49fd769f695ccfa6e990e3eaae7c886f073db19b#diff -2d21ea42ec874a0988977e57b17251aa

이 작업을 수행하는 유일한 옵션은 __disable_client_side_routing__ 또는 최소한 __disable_client_side_canonical_redirect__ 와 같은 변수를 도입하여이 조건을 단락시키는 것입니다 : https://github.com/gatsbyjs/ gatsby / blob / master / packages / gatsby / cache-dir / production-app.js # L69

@wardpeet : 이러한 구성 변수를 도입하는 데 문제가 있습니까?

우리는 코어에서 이러한 탈출구를 활성화하고 싶지 않습니다. 기본적으로 문제에 대해 이해하는 것은 다음과 같습니다.

개츠비 사이트와 경로 / my-special-path가 있고 내 서버에는 / something-else라는 경로가 있습니다. / something 다른 것을 / gatsby / my-special-path로 다시 쓰면 페이지를 / my-special-path로 변경하려고 시도하기 때문에 작동하지 않습니다.

그렇다면 플러그인에서 수정할 수 있는지 살펴 보겠습니다. 이것에 대한 라이브 데모가 있습니까?

예, 그게 바로 문제입니다. 나는 또 다른 PR (https://github.com/gatsbyjs/gatsby/pull/15173과 같은 전역 구성 변수로 침입하는 것을 추가하지 않음)을 모 으려고합니다.

몇 분 후에 다른 PR로 밀어 붙일만한 것이 있습니다.

@wardpeet 이것은 플러그인을 확장 할 수 있도록 Gatsby에 추가하는 데 woudl이 필요하다고 생각합니다. PR에 대한 몇 가지 예제와 문서를 추가했습니다.

https://github.com/gatsbyjs/gatsby/pull/15180

Discord에서 @DSchau 와 대화 한 후, # 15173 또는 # 15180과 같은 솔루션이 코어가 아니라 플러그인에 있어야한다는 핵심 기여자들이 정렬 된 것 같습니다. 그래서 그것을 해결하기 위해 다른 옵션을 탐색하고 싶습니다.

현재 내가 찾은 유일한 방법은 전역 구성 변수 (# 15173)를 통해 표준 리디렉션 검사를 단축하거나 gatsby (# 15180)에 대해 인식 된 렌더링 된 URL을 수정할 수 있도록 허용하는 것이므로 표준 리디렉션 검사는 window.location 이지만 필터링 가능한 변수에 있습니다.

IMHO, 문제는 플러그인을 사용하여 지금 확장 / 재정의 할 수없는 것으로 보이는 것을 확장 / 재정의하는 것입니다 (어디에서든 주입 된 값없이 window.location 에 직접 의존하면 정말 어렵습니다). 그러나 코어의 코드를 수정하지 않고이 동작을 구현하는 다른 방법이있을 수 있습니다.

@xavivars https://github.com/wardpeet/gatsby-plugin-static-site/pull/4를 병합하고 이에 대한 수정 사항을 게시 할 것입니다.

데모 : (5 페이지에 표준 리디렉션이 있음)
https://static-asset-prefix--zen-wright-33c2d8.netlify.com/

방금 @ wardpeet / gatsby-plugin-static-site 버전 0.1.0을 게시했습니다. 이 문제가 해결됩니다. 모든 문제가 해결되지 않았다면 언제든지 다시 열어보세요.

더 나은 정적 사이트 지원을 얻는 가장 좋은 방법은 플러그인 자체에서 문제를 만드는 것입니다. https://github.com/wardpeet/gatsby-plugin-static-site/issues/new

위의 플러그인을 사용한 후 누구든지 이것을 만났습니까?

현재 버전의 GatsbyJS에서 작동하는 해결 방법이 있습니까?

나는 시도했다 :
https://github.com/wardpeet/gatsby-plugin-static-site

그러나 그것은 나를 위해 작동하지 않습니다. 여기서 문제를 제기했습니다.
https://github.com/wardpeet/gatsby-plugin-static-site/issues/13

또한 리디렉션 문제를 재현하기 위해 샘플 저장소를 만들었습니다.
https://github.com/isi-gach/gastby-static/tree/create-react-app

@ isi-gach 근본 문제 (기대하는 것,보고있는 것,보고 싶은 것)에 대한 의견을 제공해 주시겠습니까? 이 스레드에있는 우리 중 몇 명이 시도해 보았지만 새로운 의견을 얻는 데 도움이 될 수 있습니다.

안녕하세요 @ethagnawl

브라우저 URL이 변경되지 않을 것으로 예상하지만 URL이 변경됩니다. 다음 비디오에서 URL이 /demo/index.html 에서 /public/
https://www.youtube.com/watch?v=SxYbaDidnkY

해당 비디오는 내가 만든 샘플 저장소를 사용하여 녹화되었습니다.
https://github.com/isi-gach/gastby-static/tree/create-react-app

@wardpeet/gatsby-plugin-static-site 사용하여 리디렉션을 방지하려고하는데 작동하지 않는 것 같습니다.

안녕하세요 @ isi-gach @ethagnawl ,

언급 한 문제를 해결해야하는 @wardpeet 플러그인에 몇 가지 풀 요청이 열려 있습니다.

병합되는 동안 대신 내 포크를 사용할 수 있습니다.

안녕하세요 @xavivars
포크에서 npm 시도했는데 이제 URL이 변경되지 않지만 흰색 페이지가 표시됩니다.
https://www.youtube.com/watch?v=uNzk9UYVCxk

해당 비디오는 wardpeet 를 플러그인으로 대체하는 다음 샘플 저장소를 사용하여 녹화되었습니다.
https://github.com/isi-gach/gastby-static/tree/create-react-app

단일 페이지에 대해서만 클라이언트 측 라우팅을 비활성화하려면 어떻게합니까?

이것을 사용할 수 있습니다

exports.onPreBootstrap = ({ store }) => {
  const { program } = store.getState()
  const filePath = path.join(program.directory, '.cache', 'production-app.js')

  const code = fs.readFileSync(filePath, {
    encoding: `utf-8`,
  })

  const newCode = code.replace(
    `const { pagePath, location: browserLoc } = window`,
    `const { pagePath } = window
    let { location: browserLoc } = window

    if (window.parent.location !== browserLoc) {
      browserLoc = {
        pathname: pagePath
      }
    }
  `
  )

  fs.writeFileSync(filePath, newCode, `utf-8`)
}

플러그인이 다루는 모든 사용 사례를 포함하는지 확실하지 않지만 내 경우에는 잘 작동합니다.