Gatsby: Nonaktifkan Perutean Sisi Klien?

Mengapa Anda tidak tahu jalur apa yang dirender server?

Kurangnya saya tidak akan tahu jalurnya (saya bisa menulis regex yang akan cocok dengan mereka) tetapi lebih banyak tumpang tindih. Penyiapan sebenarnya ada di belakang server apache yang membalikkan proxy ke banyak aplikasi berbeda, termasuk situs gatsby. Jika salah satu aplikasi tersebut tidak tersedia, atau mengembalikan kesalahan server internal, kami mengembalikan laman kesalahan khusus yang merupakan bagian dari situs gatsby.

Jadi kapan saja, jika app1 tidak tersedia atau berperilaku tidak semestinya, permintaan apa pun ke / app1 akan mengembalikan konten /error/unavailable.html atau /error/internal.html, dan hal yang sama berlaku untuk app2, dan seterusnya. .

Menggunakan matchPath like /^(app1|app2)/.*/ , pada halaman kesalahan internal yang tidak tersedia tidak berfungsi karena findPage tidak tahu (berdasarkan url) halaman mana yang sebenarnya saya maksud untuk menunjukkan kepada pengguna.

Saya bisa mendapatkan sesuatu yang bekerja menggunakan variabel global dan "menambal" ___history dan ___loader dalam onClientEntry . Ini sangat rapuh karena ketergantungan pada gats dengan mengekspos global tersebut - tidak yakin apakah ada cara untuk menggeneralisasi ini dan menambahkannya ke gatsby.

• Patching history menangkap panggilan menggunakan props.location.pathname
  component-renderer.js # L18-L28

• Patching loader menangkap penggunaan langsung dari window.location.pathname
  produksi-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>
)

Saya juga setuju bahwa harus ada opsi build untuk menonaktifkan fitur ini. Kami juga memiliki penyiapan yang tidak biasa dan ingin menonaktifkan fitur ini sementara sementara kami menyelesaikan migrasi ke situs Gatsby lengkap.

Bendera sederhana pada waktu membangun akan menjadi sempurna.

bagaimana dengan yang ini? ada solusi untuk ini?

Kami akhirnya memodifikasi pages.json agar sesuai dengan jalur yang kami butuhkan. Kita pada dasarnya dapat memanggil addPagesArray dengan nama jalur yang dikoreksi.

Saya masih tidak mengerti mengapa ini membuat kesalahan? Halaman memuat dengan baik dan berfungsi. Ini paling banyak harus menjadi peringatan ketika tidak cocok dengan jalur.

Itu dikatakan saya tidak tahu apakah ada cara yang lebih elegan untuk memodifikasi pages.json melalui kode config vs runtime.

Saya ingin mengatasi masalah ini.

Proyek yang saya kerjakan mengalami masalah serupa. Kami sedang membangun generator halaman arahan yang akan membangun aplikasi Gatsby satu halaman. Masalah ini muncul saat kami mencoba menyajikan halaman arahan di luar domainnya.

Jadi misalnya kami memiliki aplikasi Gatsby utama kami www.example.com . Kami memiliki layanan yang akan membuka laman landas Gatsby dan menyajikannya dengan harga www.example.com/trial . Jadi URL halaman arahan akan terlihat seperti www.example.com/trail/ad-123 Halaman awalnya memuat dengan baik sampai semua JS dimuat dan router mengambil alih. Halaman arahan melihat ke jalur dan tidak tahu di mana itu, jadi ia mencoba mengubah jalur untuk menempatkan halaman di root, terlihat seperti ini www.example.com/ad-123 , yang menghasilkan pengalihan 404.

Apakah ada rencana untuk menambahkan opsi yang dapat dikonfigurasi untuk memperbaikinya? Akankah tim Gatsby terbuka untuk PR?

@ alex-greco-harrys Bagi saya, awalan path adalah yang ingin Anda gunakan dalam skenario itu.

Saya juga perlu menonaktifkan perutean sisi klien untuk menjalankan Google Adsense dengan benar di situs web saya.

Iklan otomatis Google Adsense tidak mendeteksi perutean sisi klien dan iklan tidak menyegarkan ketika rute diperbarui.

Apakah tetap ada saya yang dapat menonaktifkan perutean sisi klien?

Anda dapat menggunakan tag a daripada gatsby-link dalam kasus seperti itu

Saya bisa mendapatkan sesuatu yang bekerja menggunakan variabel global dan "menambal" ___history dan ___loader dalam onClientEntry . Ini sangat rapuh karena ketergantungan pada gats dengan mengekspos global tersebut - tidak yakin apakah ada cara untuk menggeneralisasi ini dan menambahkannya ke gatsby.

• Patching history menangkap panggilan menggunakan props.location.pathname
  component-renderer.js # L18-L28
• Patching loader menangkap penggunaan langsung dari window.location.pathname
  produksi-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 dari mana Anda mendapatkan ___history , ___loader ? Ketika saya mencoba mereplikasi contoh Anda, dua properti global tersebut adalah undfined .

@ alex-greco-harrys Bagi saya, awalan path adalah yang ingin Anda gunakan dalam skenario itu.

@ jgierer12 Itu membantu menyelesaikan bagian pertama dari masalah saya. Bagian kedua adalah jalur terakhir tidak diketahui sampai halaman dirender. Kami memiliki layanan pembelajaran yang mengambil kumpulan halaman statis dan menyajikannya berdasarkan rasio konversi. Jadi di jalur example.com/go/ kita bisa melayani 1 dari kumpulan halaman. Jadi kami tidak akan menyajikan halaman di jalur seperti example.com/go/first-page atau example.com/go/second-page . Keduanya akan disajikan di example.com/go/page path.

Pada dasarnya apa yang saya coba capai adalah melayani halaman gatsby di jalur apa pun yang saya inginkan.

@ alex-greco-harrys yang global itu diekspos oleh gatsby v1. Dengan peningkatan ke v2, saya tahu router yang mendasarinya telah dialihkan dari react-router ke reach-router, jadi tebakan saya adalah yang global terpengaruh.

Saya juga berharap menggunakan Gatsby untuk membangun aplikasi satu halaman dan ingin menonaktifkan perutean sepenuhnya. Apakah ada yang tahu solusi (ala @TuckerWhitehouse ) yang kompatibel dengan V2?

MEMPERBARUI:
Meskipun saya tidak dapat menemukan solusi yang akan _disable_ perutean sisi klien, saya dapat mencegah pengalihan yang dirujuk oleh @ alex-greco-harrys dan lainnya dengan menyetel:

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

di gatsby-browser.js yang membuat sirkuit pendek pemeriksaan bersyarat ini di production-app.js. Pengalihan bersyarat tersebut mencoba untuk "membuat jalur kanonis cocok dengan jalur yang sebenarnya" dan menghasilkan perilaku (IMO) tidak terduga yang dirujuk di atas.

Saya juga butuh ini.

Saat ini saya menggunakan kode yang dihasilkan oleh Gatsby di proyek lain dan saya menggunakannya di banyak halaman. Saya menggunakan Gatsby karena menghasilkan kode statis. Oleh karena itu, saya menggunakan pathPrefix sehingga saya dapat menghasilkan semuanya di bawah jalur tertentu dan menyajikannya. Dengan begitu, semua akan diminta di sana dan kemudian dirender sebagai bagian dari halaman. Namun, saya mendapatkan pengalihan yang tidak diinginkan sepanjang waktu ke pathPrefix karena itu ada dalam skrip. Saya harus secara manual menghapus kondisi yang disebutkan @ethagnawl setiap kali saya membangun. Saya baru saja mencoba solusinya tetapi tidak berhasil untuk saya.

Saya juga berharap menggunakan Gatsby untuk membangun aplikasi satu halaman dan ingin menonaktifkan perutean sepenuhnya. Apakah ada yang tahu solusi (ala @TuckerWhitehouse ) yang kompatibel dengan V2?

MEMPERBARUI:
Meskipun saya tidak dapat menemukan solusi yang akan _disable_ perutean sisi klien, saya dapat mencegah pengalihan yang dirujuk oleh @ alex-greco-harrys dan lainnya dengan menyetel:

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

di gatsby-browser.js yang membuat sirkuit pendek pemeriksaan bersyarat ini di production-app.js. Pengalihan bersyarat tersebut mencoba untuk "membuat jalur kanonis cocok dengan jalur yang sebenarnya" dan menghasilkan perilaku (IMO) tidak terduga yang dirujuk di atas.

@ethagnawl Saya memiliki solusi untuk menghasilkan aplikasi satu halaman yang dapat disajikan di URL mana pun. Dengan satu halaman, yang saya maksud adalah satu halaman tanpa perutean sama sekali.

Jika Anda melihat contoh Gatsby berikut: https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths .

Anda dapat mengedit file ini pada baris 15 agar terlihat seperti <Page path="/*" {...props} /> dan menghapus baris 16. Ketika Anda membangun aplikasi ini, jalur mana pun akan menghasilkan Page yang telah Anda tentukan. Dari sana Anda dapat menghasilkan Page apa pun yang Anda inginkan. Sekarang jika Anda perlu menghosting halaman ini di jalur arbitrer, Anda tidak akan melihat pengalihan.

Saya tidak dapat mengetahui bagaimana solusi ini dapat bekerja dengan banyak halaman dalam sebuah aplikasi. Tujuan proyek saya adalah menyajikan satu halaman Gatsby (halaman arahan pemasaran) di URL mana pun yang saya inginkan.

Tidak yakin apakah ini membantu dalam kasus penggunaan Anda, tetapi mungkin ini dapat memicu penemuan di masa mendatang!

Saya dapat melakukannya dengan mengikuti petunjuk Menyesuaikan html.js di dokumen dan menghapus {this.props.postBodyComponents}

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

Berdasarkan seberapa aktif utas ini terus berlanjut, tampaknya ada sejumlah pengguna yang tidak sepele yang menginginkan perilaku ini.

Untuk mengulangi kembali kasus penggunaan saya dengan cepat: Saya ingin ( melakukannya! ) Menggunakan Gatsby sebagai generator _page_ statis - sebagai lawan dari generator _site_ statis - dan karena "halaman" Gatsby dimasukkan ke dalam halaman berisi yang URL-nya tidak kendali saya dan dapat berubah, saya tidak ingin aplikasi Gatsby _ever_ menyia-nyiakan URL. Di luar kotak, Gatsby _mostly_ mendukung kasus penggunaan ini dan sangat menyenangkan untuk digunakan, tetapi ia membuat beberapa asumsi - sekali lagi, karena kasus penggunaan _site_ statis standar - yang mengakibatkan perlunya peretasan seperti yang disebutkan atas.

Jadi, adakah harapan untuk kemampuan menonaktifkan perutean sisi klien menjadi opsi konfigurasi tingkat atas? Saya akan dengan senang hati mengirimkan PR, tetapi tidak ingin menghabiskan waktu jika tidak ada kemungkinan itu akan diterima.

Ini sepertinya fitur yang masuk akal untuk menambahkan @ethagnawl. Saya pikir itu akan membutuhkan nama yang sangat panjang dan menjengkelkan seperti dangeouslySetInnerHTML sehingga orang-orang sepenuhnya sadar akan apa yang mereka lakukan karena ini adalah kasus tepi yang sangat khusus.

Lulus pertama saya di PR yang menangani masalah ini dapat ditemukan di sini . Saya sangat menghargai umpan balik dari pengelola dan / atau pengguna lain yang mengalami masalah ini.

Terima kasih telah membuat aPR @ethagnawl

Bisakah Anda mengingatkan saya lagi mengapa berikut ini tidak berhasil?

// 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 Saya yakin itu akan berhasil dan terlihat mirip dengan solusi yang saya sebutkan di atas . Namun, solusi semacam itu sulit untuk didokumentasikan dan berpotensi rapuh (lihat solusi yang ditawarkan oleh @TuckerWhitehouse yang tidak lagi berfungsi).

IMO, mengkodifikasi konsep ini bermanfaat karena, sekali lagi, ini membuat dokumentasi lebih mudah dan tanda ini juga dapat digunakan untuk membuat pengoptimalan tambahan dengan bypass / noop-ing / etc. fungsionalitas yang tidak relevan saat Gatsby digunakan dengan cara ini.

Selain itu, menggunakan matchPath memerlukan url di browser untuk mencerminkan halaman yang ingin Anda render, tetapi ini rusak saat Anda memasukkan situs gatsby ke lokasi yang tidak diketahui. (Masalah asli saya adalah memiliki gatsby di belakang proxy balik apache dan tidak mengetahui rute yang akan menyebabkan halaman tertentu dirender).

@ethagnawl menurut Anda apakah mungkin untuk menonaktifkan perutean pada tingkat halaman (seperti page.__disable_client_side_routing__ = true )? Ini mungkin akan menyelesaikan masalah asli yang saya alami juga.

menurut Anda apakah mungkin untuk menonaktifkan perutean di tingkat halaman

Saya tidak mengerti mengapa tidak? Apakah itu sebagai tambahan atau menggantikan solusi yang saya usulkan? Jika yang terakhir, apakah ada keuntungan melakukan itu di tingkat halaman?

Saya telah menyiapkan repo ini :)
https://github.com/wardpeet/gatsby-plugin-static-site

tidak yakin apakah ini berhasil untuk kasus penggunaan Anda.
Untuk saat ini yang perlu Anda lakukan

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

tambahkan gatsby-plugin-static-site ke gatsby-config.js Anda

Beri tahu saya jika ini tidak masalah untuk kasus penggunaan Anda, saya tidak berniat untuk benar-benar mendukungnya jadi saya dengan senang hati mentransfernya: smile:

Saya memperbarui repo karena ada yang salah di file gitignore saya (terima kasih @ m-allanson). Saya juga menerbitkannya ke npm dengan nama saya sendiri.

jadi penginstalan bisa dilakukan

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

dan tambahkan @wardpeet/gatsby-plugin-static-site ke gatsby-config.json

Jika ini terlihat bagus maka saya dapat menambahkan beberapa tes dan beberapa opsi untuk menonaktifkan perilaku ini untuk dikembangkan.

Hai!

Masalah ini telah menjadi sunyi. Diam seram. 👻

Kami mendapatkan banyak masalah, jadi saat ini kami menutup masalah setelah 30 hari tidak aktif. Sudah setidaknya 20 hari sejak pembaruan terakhir di sini.

Jika kami melewatkan masalah ini atau jika Anda ingin tetap membukanya, balas di sini. Anda juga dapat menambahkan label "tidak basi" agar masalah ini tetap terbuka!

Terima kasih telah menjadi bagian dari komunitas Gatsby! 💪💜

Saya ingin ini tetap terbuka karena sepertinya menunggu tinjauan

Saya tidak yakin ini tidak basi, saya memperbaikinya dan berharap mendapat umpan balik untuk itu
https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment -470075540

Jika tidak ada yang menanggapi, saya pikir itu ide yang baik untuk menutup ini karena mungkin sudah diselesaikan.

@wardpeet apakah mungkin dengan plugin itu untuk menonaktifkan perutean sisi klien secara kondisional?

@wardpeet IIRC, perbaikan yang Anda usulkan adalah langkah pertama dalam proses (mungkin, akhirnya) mendapatkan fitur ini ditambahkan sebagai opsi konfigurasi Gatsby. Jadi, jenis_ itu berhasil keluar dari jalur sejauh menyangkut masalah ini dan Gatsby, tetapi saya mungkin berargumen bahwa masalah ini harus tetap terbuka untuk melanjutkan percakapan itu.

@wardpeet masalah aslinya adalah tentang menonaktifkan perutean sisi klien untuk rute tertentu , @ethagnawl mengemukakan kasus penggunaan penonaktifan perutean untuk seluruh situs yang saya yakini sebagai alamat plugin Anda.

Saya perlu menonaktifkan perutean sisi klien untuk sementara saat saya memigrasi situs di CMS lama ke Gatsby. Saya melakukannya satu halaman pada satu waktu sebelum membalik tombol sepenuhnya menjadi hanya gatsby.

Saya sudah mencoba plugin @wardpeet tetapi tampaknya tidak berfungsi.

@ Brianbento, apakah Anda punya reproduksi? jika Anda dapat membuat masalah di repo https://github.com/wardpeet/gatsby-plugin-static-site, saya dapat melihat apa yang hilang

@wardpeet Saya akan melihat apakah saya bisa mendapatkan sesuatu. Masalah utamanya adalah "perbaikan" yang Anda sebutkan sebelumnya (https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment-465497418) tidak berfungsi saat Anda menggunakan pathPrefix. Itu selalu "mengoreksi" alamat ke apa yang diharapkan.

@ Brianbento Sudahkah Anda mencoba solusi yang saya sebutkan di atas ? Itu telah bekerja dengan baik untuk saya pada dua proyek berbeda.

@ethagnawl Saya masih mendapatkan koreksi URL dan kemudian menggandakan awalan jalur.

Jadi "/" menjadi "//"setelah kanonis tidak cocok.

Mungkin saya salah menerapkannya. Apakah Anda menggunakan awalan jalur untuk halaman Anda? Apakah saya seharusnya mengaktifkan plugin situs statis?

Apakah Anda menggunakan awalan jalur untuk halaman Anda?

Iya. Saya juga menggunakan cabang ini untuk memungkinkan aset jarak jauh. Jadi, _possible_ cabang itu memperkenalkan perilaku yang membuat perbaikan berhasil untuk saya dan bukan Anda.

Namun, kemungkinan besar rilis Gatsby baru-baru ini (saya tidak mengikutinya) telah merusak "solusi" saya, karena ini adalah peretasan untuk memulai.

@ethagnawl Sangat membantu! Terima kasih! Saya tahu @DSchau membuat beberapa plugin untuk menguji fitur assetPrefix. Saya akan mencobanya!

Tampaknya solusi @wardpeet tidak berfungsi saat Anda juga perlu menggunakan awalan jalur. Memiliki solusi seperti yang diusulkan __disable_client_side_routing__ yang menonaktifkan pemeriksaan kanonik akan sangat keren. Saya akan dengan senang hati mengerjakannya dan mengirimkan PR jika akan dipertimbangkan untuk digabungkan. Adakah dukungan untuk gagasan itu, atau apakah menurut Anda itu tidak sesuai dengan peta jalan?

@xavivars Saya ingin itu dan merasa pasti berguna.

@xavivars Saya melewatkan fitur itu beberapa waktu lalu, yang ditutup demi solusi apa @wardpeet . Jika Anda akan mempertimbangkan untuk meninjau kembali pendekatan itu, mungkin ada baiknya melihat usaha saya.

Terima kasih @ethagnawl ! Saya melihat pendekatan Anda, dan itulah yang saya pikirkan.

Saya pikir solusi @wardpeet mencakup kasus penggunaan yang berbeda: aplikasi tidak berperilaku sebagai SPA karena tautan sebenarnya mengubah browser location.href , jadi kemudian ia menavigasi "sisi server". Tetapi saya tidak dapat membuatnya berfungsi untuk kasus penggunaan saya karena pengalihan awal masih terjadi: hipotesis awal saya adalah ada semacam interaksi dengan prefixPath yang membuat kondisi ini bernilai true

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

Apakah Anda berhasil membuatnya berfungsi dengan baik?

Saya mungkin dapat melakukan lebih banyak pekerjaan pada plugin jika ada yang dapat menjelaskan kepada saya masalah sebenarnya karena saya agak lupa apa yang perlu saya perbaiki. Mungkin sebagian besar dari ini dapat diselesaikan dengan opsi assetPrefix yang baru digabungkan?

Maaf karena tidak mengerti.

@bayu_joo

Apakah Anda berhasil membuatnya berfungsi dengan baik?

Baik peretasan saya dan PR yang dikirimkan _berfungsi dengan benar_ untuk kasus penggunaan saya: pembuatan halaman tunggal dan statis tanpa pengalihan. Saya menyerah pada PR saya karena tim Gatsby tampaknya lebih memilih plugin daripada opsi konfigurasi tingkat aplikasi.

Saya tidak pernah sempat mencoba plugin @wardpeet , karena saya sudah menyelesaikan proyek Gatsby yang sedang saya kerjakan pada saat dipublikasikan. Jadi, saya tidak bisa berkomentar apakah itu pernah _berfungsi dengan benar_ atau tidak.

@wardpeet : assetPrefix tidak memperbaikinya. Saya berhasil membuatnya berfungsi dengan menggunakan kedua plugin Anda (untuk, pada dasarnya, menonaktifkan "navigasi" sisi klien saat mengklik) dan solusi yang disebutkan oleh @ethagnawl beberapa bulan yang lalu

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

Solusi tersebut diperlukan untuk menonaktifkan peristiwa "navigasi" yang terjadi onClientEntry . Kami memperbaiki menambahkan hook di sana dan menerapkan solusi itu (memaksa page.path ke jalur sebenarnya). Tapi saya tidak tahu apakah itu memiliki efek samping, dan juga berapa lama sampai berhenti bekerja (tidak lebih dari hack).

Idealnya, menurut saya ini adalah konfigurasi tingkat aplikasi, mengingat jumlah orang yang tampaknya menggunakan gatsby sebagai "generator halaman statis"

@xavivars Apakah Anda memiliki link yang dapat dibagikan dengan Anda?

Tidak juga, tapi ini cukup banyak:

Tambahkan plugin statis yang disebutkan sebelumnya, dan di gastby-browser.js

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

Berikut ini juga berfungsi, meskipun bergantung pada internal gatsby:

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

Apakah menggunakan https://github.com/wardpeet/gatsby-plugin-static-site & assetPrefix berfungsi?

Masalah terkait yang membuat contoh berhasil, tidak yakin apakah ini yang sebenarnya Anda butuhkan.
https://github.com/wardpeet/gatsby-plugin-static-site/issues/1#issuecomment -494802726

Bagi saya, ini bekerja dengan tiga hal: situs statis plugin gatsby + assetPrefix + menonaktifkan "navigasi" seperti yang ditunjukkan di atas

Sepertinya saya masih kesulitan memahami apa yang dibutuhkan di sini. Saya bisa saja memperbaiki masalah dengan gatsby-plugin-static-site & assetPrefix.

@wardpeet Apakah Anda memiliki link ke demo yang menggunakan gatsby-plugin-static?

@ethagnawl maaf membuat Anda menunggu.

Saya membuat demo:
https://github.com/wardpeet/gatsby-demos/tree/static-asset-prefix

situs sedang live:
https://zen-wright-33c2d8.netlify.com/

Seperti yang diharapkan (dan diantisipasi oleh @TuckerWhitehouse dan @ethagnawl), solusi rapuh seperti yang disediakan di https://github.com/gatsbyjs/gatsby/issues/4337#issuecomment -453244611 tidak berfungsi lagi, karena ada perubahan di Gatsby 2.9.2, karena beberapa alasan:

Yang pertama, bisa dipecahkan, adalah garis ini
window.page.path = window.location.pathname;
perlu diganti dengan
window.pagePath = window.location.pathname;
untuk menghindari perubahan di sisi klien URL.

Tapi itu memiliki efek samping yang tidak diinginkan: pagePath disetel dengan jalur _wrong_, dan halaman-data.json tidak dimuat lagi (karena bergantung pada jalur asli halaman, dan bukan yang akhirnya dirender)

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

Tampaknya satu-satunya pilihan untuk membuat ini berfungsi sekarang adalah dengan benar-benar memperkenalkan variabel seperti __disable_client_side_routing__ atau, setidaknya, __disable_client_side_canonical_redirect__ untuk menyingkat kondisi ini: https://github.com/gatsbyjs/ gatsby / blob / master / packages / gatsby / cache-dir / production-app.js # L69

@wardpeet : apakah Anda melihat ada masalah saat memperkenalkan variabel config seperti itu?

Kami lebih suka tidak ingin mengaktifkan pintu keluar keluar ini di inti. Apa yang pada dasarnya saya pahami tentang masalah ini, adalah ini:

Saya memiliki situs gatsby dan jalur / jalur-khusus-saya dan di server saya, saya memiliki rute yang disebut / sesuatu-lain. Jika saya menulis ulang / sesuatu yang lain ke / gatsby / my-special-path, itu tidak akan berfungsi karena mencoba mengubah halaman menjadi / my-special-path?

Jika demikian, saya akan melihat apakah saya dapat memperbaikinya di plugin saya. Apakah Anda mungkin memiliki demo langsung tentang ini?

Ya, itulah masalahnya. Saya akan mencoba mengumpulkan PR lain (yang tidak menambahkan sesuatu yang invasif sebagai variabel konfigurasi global seperti https://github.com/gatsbyjs/gatsby/pull/15173).

Saya memiliki sesuatu yang mungkin dapat diterima yang akan saya dorong sebagai PR lain dalam beberapa menit

@wardpeet inilah yang menurut saya perlu ditambahkan ke Gatsby agar plugin Anda dapat diperpanjang. Saya telah menambahkan beberapa contoh dan dokumentasi pada PR

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

Setelah percakapan dengan @DSchau di Discord, tampaknya kontributor inti selaras bahwa solusi seperti # 15173 atau # 15180 tidak boleh hidup dalam inti, tetapi dalam sebuah plugin. Jadi saya ingin mencari opsi lain untuk menyelesaikannya.

Saat ini satu-satunya cara yang saya temukan adalah melalui variabel konfigurasi global (# 15173) untuk melakukan shortcircuit pada pemeriksaan pengalihan kanonik, atau dengan mengizinkan untuk mengubah URL yang dirender yang dirasakan untuk gatsby (# 15180), sehingga pemeriksaan pengalihan kanonik tidak secara langsung bergantung pada window.location , tetapi pada variabel yang dapat difilter.

IMHO, tantangannya adalah menggunakan plugin untuk memperluas / menimpa sesuatu yang tampaknya tidak dapat diperluas / diganti saat ini (secara langsung mengandalkan window.location tanpa nilai yang disuntikkan dari mana pun membuatnya sangat sulit bagi saya), tetapi mungkin ada cara lain untuk menerapkan perilaku ini tanpa mengubah kode inti.

@xavivars Saya akan menggabungkan https://github.com/wardpeet/gatsby-plugin-static-site/pull/4 dan memublikasikan perbaikan untuk ini.

Demo: (halaman 5 memiliki pengalihan kanonik)
https://static-asset-prefix--zen-wright-33c2d8.netlify.com/

Saya baru saja menerbitkan @ wardpeet / gatsby-plugin-static-site versi 0.1.0. Ini harus memperbaiki masalah ini. Jangan ragu untuk membuka kembali jika itu tidak memperbaiki semua masalah Anda.

Cara terbaik untuk mendapatkan dukungan situs statis yang lebih baik adalah dengan membuat masalah di plugin itu sendiri. https://github.com/wardpeet/gatsby-plugin-static-site/issues/new

Adakah yang mengalami ini setelah menggunakan plugin di atas?

Adakah solusi yang berfungsi untuk versi GatsbyJS saat ini?

Saya mencoba:
https://github.com/wardpeet/gatsby-plugin-static-site

tapi itu tidak berhasil untukku. Saya mengangkat masalah di sini:
https://github.com/wardpeet/gatsby-plugin-static-site/issues/13

Saya juga membuat repo sampel untuk mereproduksi masalah pengalihan:
https://github.com/isi-gach/gastby-static/tree/create-react-app

@ isi-gach Maukah Anda memberikan pendapat Anda tentang akar masalah (apa yang Anda harapkan, apa yang Anda lihat, apa yang ingin Anda lihat)? Beberapa dari kita di utas ini telah mencoba, tetapi mungkin membantu untuk mendapatkan pandangan baru tentang itu.

hai @ethawl

Saya berharap URL browser tidak berubah tetapi saya melihat URL berubah, di video berikut URL berubah dari /demo/index.html menjadi /public/
https://www.youtube.com/watch?v=SxYbaDidnkY

Video tersebut direkam menggunakan sample repo yang sudah saya buat:
https://github.com/isi-gach/gastby-static/tree/create-react-app

Saya mencoba mencegah pengalihan menggunakan @wardpeet/gatsby-plugin-static-site tetapi sepertinya tidak berhasil.

Hai @ isi- gach @ethagnawl ,

Ada beberapa permintaan tarik yang dibuka ke plugin @wardpeet yang seharusnya menyelesaikan masalah yang Anda

Saat digabungkan, Anda dapat menggunakan garpu saya

Halo @xaviars
Saya mencoba npm dari garpu Anda dan sekarang URL tidak berubah tetapi saya mendapat halaman putih:
https://www.youtube.com/watch?v=uNzk9UYVCxk

Video itu direkam menggunakan contoh repo berikut menggantikan wardpeet oleh plugin milik Anda:
https://github.com/isi-gach/gastby-static/tree/create-react-app

bagaimana cara menonaktifkan perutean sisi klien hanya untuk satu halaman?

Anda bisa menggunakan ini

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

Saya tidak yakin apakah itu mencakup semua kasus penggunaan yang dicakup plugin, tetapi berfungsi dengan baik untuk kasus saya.