Saya menggunakan React-router dan berfungsi dengan baik saat saya mengklik tombol tautan, tetapi ketika saya menyegarkan halaman web saya tidak memuat apa yang saya inginkan.
Misalnya, saya masuk localhost/joblist
dan semuanya baik-baik saja karena saya tiba di sini dengan menekan tautan. Tetapi jika saya me-refresh halaman web saya mendapatkan:
Cannot GET /joblist
Secara default, tidak berfungsi seperti ini. Awalnya saya punya URL saya localhost/#/
dan localhost/#/joblist
dan mereka bekerja dengan sangat baik. Tapi saya tidak suka URL semacam ini, jadi mencoba menghapusnya #
, saya menulis:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
Masalah ini tidak terjadi localhost/
, yang ini selalu mengembalikan apa yang saya inginkan.
EDIT: Aplikasi ini satu halaman, jadi /joblist
tidak perlu meminta apa pun ke server mana pun.
EDIT2: Seluruh router saya.
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
sumber
#
simbol itu? Terima kasih!index.html
. Ini akan memastikanindex.html
mengenai apa pun yang terjadi.Jawaban:
Melihat komentar pada jawaban yang diterima dan sifat umum dari pertanyaan ini ('tidak berfungsi'), saya pikir ini mungkin tempat yang bagus untuk beberapa penjelasan umum tentang masalah yang terlibat di sini. Jadi jawaban ini dimaksudkan sebagai informasi latar belakang / elaborasi pada kasus penggunaan khusus OP. Tolong bersamaku.
Sisi server vs sisi Klien
Hal besar pertama yang harus dipahami tentang hal ini adalah bahwa sekarang ada 2 tempat di mana URL ditafsirkan, sedangkan dulu hanya ada 1 di 'masa lalu'. Di masa lalu, ketika hidup itu sederhana, beberapa pengguna mengirim permintaan
http://example.com/about
ke server, yang memeriksa bagian jalur URL, menentukan pengguna meminta halaman tentang dan kemudian mengirim kembali halaman itu.Dengan perutean sisi klien, yang disediakan oleh React-Router, segalanya menjadi kurang sederhana. Pada awalnya, klien belum memiliki kode JS yang dimuat. Jadi permintaan pertama akan selalu ke server. Itu kemudian akan mengembalikan halaman yang berisi tag skrip yang diperlukan untuk memuat Bereaksi dan Bereaksi Router dll. Hanya ketika skrip-skrip itu dimuat, fase 2 dimulai. Pada fase 2, ketika pengguna mengklik tautan navigasi 'Tentang kami' misalnya, URL diubah secara lokal saja menjadi
http://example.com/about
(dimungkinkan oleh API Sejarah ), tetapi tidak ada permintaan ke server dibuat. Alih-alih, React Router melakukan tugasnya di sisi klien, menentukan tampilan Bereaksi mana yang akan di-render dan dirender. Dengan asumsi halaman tentang Anda tidak perlu melakukan panggilan REST, itu sudah dilakukan. Anda telah beralih dari Rumah ke Tentang Kami tanpa ada permintaan server yang dipecat.Jadi pada dasarnya ketika Anda mengklik sebuah tautan, beberapa Javascript berjalan yang memanipulasi URL di bilah alamat, tanpa menyebabkan penyegaran halaman , yang pada gilirannya menyebabkan React Router untuk melakukan transisi halaman di sisi klien .
Tetapi sekarang pertimbangkan apa yang terjadi jika Anda menyalin-tempel URL di bilah alamat dan mengirimkannya lewat email ke teman. Teman Anda belum memuat situs web Anda. Dengan kata lain, dia masih dalam fase 1 . Belum ada React Router yang berjalan di mesinnya. Jadi browsernya akan membuat permintaan server untuk
http://example.com/about
.Dan di sinilah masalah Anda dimulai. Hingga saat ini, Anda bisa lolos hanya dengan meletakkan HTML statis di webroot server Anda. Tetapi itu akan memberikan
404
kesalahan untuk semua URL lain ketika diminta dari server . URL yang sama berfungsi dengan baik di sisi klien , karena ada React Router melakukan perutean untuk Anda, tetapi mereka gagal di sisi server kecuali Anda membuat server Anda memahaminya.Menggabungkan perutean server dan sisi klien
Jika Anda ingin
http://example.com/about
URL berfungsi di sisi server dan sisi klien, Anda perlu mengatur rute untuk itu di sisi server dan sisi klien. Masuk akal bukan?Dan di sinilah pilihan Anda dimulai. Solusi berkisar dari mem-bypass masalah sama sekali, melalui rute catch-all yang mengembalikan bootstrap HTML, ke pendekatan isomorfik lengkap di mana server dan klien menjalankan kode JS yang sama.
.
Memotong masalah sama sekali: Sejarah Hash
Dengan Hash History alih-alih Riwayat Browser , URL Anda untuk halaman tentang akan terlihat seperti ini:
http://example.com/#/about
Bagian setelah#
simbol hash ( ) tidak dikirim ke server. Jadi server hanya melihathttp://example.com/
dan mengirim halaman indeks seperti yang diharapkan. React-Router akan mengambil#/about
bagian itu dan menampilkan halaman yang benar.Kerugian :
.
Tangkap semua
Dengan pendekatan ini, Anda menggunakan Riwayat Peramban, tetapi hanya mengatur catch-all pada server yang mengirim
/*
keindex.html
, secara efektif memberi Anda banyak situasi yang sama seperti dengan Hash History. Namun Anda memiliki URL bersih dan Anda dapat memperbaiki skema ini nanti tanpa harus membatalkan semua favorit pengguna Anda.Kerugian :
.
Hibrida
Dalam pendekatan hibrida, Anda memperluas skenario catch-all dengan menambahkan skrip khusus untuk rute tertentu. Anda dapat membuat beberapa skrip PHP sederhana untuk mengembalikan halaman terpenting situs Anda dengan konten yang disertakan, sehingga Googlebot setidaknya dapat melihat apa yang ada di halaman Anda.
Kerugian :
.
Isomorfis
Bagaimana jika kita menggunakan Node JS sebagai server kita sehingga kita dapat menjalankan kode JS yang sama di kedua ujungnya? Sekarang, kita memiliki semua rute yang kita tentukan dalam satu konfigurasi router reaksi dan kita tidak perlu menduplikasi kode rendering kita. Jadi ini adalah 'cawan suci'. Server mengirimkan markup yang sama persis seperti yang kita akan berakhir jika transisi halaman telah terjadi pada klien. Solusi ini optimal dalam hal SEO.
Kerugian :
window
sisi server dll).
Yang mana yang harus saya gunakan?
Pilih salah satu yang bisa Anda hindari. Secara pribadi saya pikir hasil tangkapan-semua cukup sederhana untuk diatur, jadi itu adalah minimum saya. Pengaturan ini memungkinkan Anda untuk memperbaiki berbagai hal dari waktu ke waktu. Jika Anda sudah menggunakan Node JS sebagai platform server Anda, saya pasti akan menyelidiki melakukan aplikasi isomorfik. Ya itu sulit pada awalnya, tetapi begitu Anda memahami itu sebenarnya solusi yang sangat elegan untuk masalah tersebut.
Jadi pada dasarnya, bagi saya, itu akan menjadi faktor penentu. Jika server saya berjalan pada Node JS, saya akan menggunakan isomorfis; kalau tidak saya akan mencari solusi Catch-all dan hanya mengembangkannya (solusi Hybrid) seiring berjalannya waktu dan persyaratan SEO menuntutnya.
Jika Anda ingin mempelajari lebih lanjut tentang rendering isomorfis (juga disebut 'universal') dengan React, ada beberapa tutorial bagus tentang subjek ini:
Juga, untuk memulai, saya sarankan untuk melihat beberapa starter kit. Pilih satu yang cocok dengan pilihan Anda untuk tumpukan teknologi (ingat, Bereaksi hanyalah V di MVC, Anda perlu lebih banyak barang untuk membangun aplikasi lengkap). Mulailah dengan melihat yang diterbitkan oleh Facebook sendiri:
Atau pilih salah satu dari banyak oleh komunitas. Ada situs bagus sekarang yang mencoba mengindeks semuanya:
Saya mulai dengan ini:
Saat ini saya menggunakan versi render universal buatan sendiri yang terinspirasi oleh dua starter kit di atas, tetapi sekarang sudah ketinggalan zaman.
Semoga berhasil dengan pencarian Anda!
sumber
/*
dan membuatnya merespons dengan halaman HTML Anda. Yang rumit di sini adalah memastikan bahwa Anda tidak memotong permintaan untuk file .js dan .css dengan rute ini.createMemoryHistory is not a function
kesalahan Pikiran lihat? stackoverflow.com/questions/45002573/...Jawaban di sini sangat membantu, apa yang berhasil bagi saya adalah mengonfigurasi server Webpack saya untuk mengharapkan rute.
HistoryApiFallback adalah apa yang memperbaiki masalah ini untuk saya. Sekarang perutean bekerja dengan benar dan saya dapat menyegarkan halaman atau mengetik URL secara langsung. Tidak perlu khawatir tentang bekerja di server node Anda. Jawaban ini jelas hanya berfungsi jika Anda menggunakan webpack.
EDIT: lihat jawaban saya di sini untuk alasan yang lebih terperinci mengapa ini diperlukan: https://stackoverflow.com/a/37622953/5217568
sumber
historyApiFallback
Cukup. Adapun semua opsi lain, itu juga dapat diatur dari CLI dengan bendera--history-api-fallback
.Anda dapat mengubah
.htaccess
file Anda dan menyisipkan ini:Saya menggunakan
react: "^16.12.0"
danreact-router: "^5.1.2"
Metode ini adalah Catch-all dan mungkin cara termudah untuk membantu Anda memulai.sumber
Untuk Pengguna React Router V4 :
Jika Anda mencoba menyelesaikan masalah ini dengan teknik Hash History yang disebutkan dalam jawaban lain, perhatikan itu
tidak bekerja di V4, silakan gunakan
HashRouter
sebagai gantinya:Referensi: HashRouter
sumber
Router dapat dipanggil dengan dua cara berbeda, tergantung pada apakah navigasi terjadi pada klien atau pada server. Anda mengonfigurasinya untuk operasi sisi klien. Parameter kunci adalah yang kedua untuk menjalankan metode , lokasi.
Ketika Anda menggunakan komponen React Router Link, itu memblokir navigasi browser dan memanggil transisi untuk melakukan navigasi sisi klien. Anda menggunakan HistoryLocation, sehingga ia menggunakan API riwayat HTML5 untuk menyelesaikan ilusi navigasi dengan mensimulasikan URL baru di bilah alamat. Jika Anda menggunakan browser lama, ini tidak akan berfungsi. Anda harus menggunakan komponen HashLocation.
Ketika Anda menekan refresh, Anda mem-bypass semua React dan React Router code. Server mendapatkan permintaan
/joblist
dan ia harus mengembalikan sesuatu. Di server Anda harus melewati jalur yang diminta kerun
metode agar dapat membuat tampilan yang benar. Anda dapat menggunakan peta rute yang sama, tetapi Anda mungkin perlu panggilan berbedaRouter.run
. Seperti yang ditunjukkan Charles, Anda dapat menggunakan penulisan ulang URL untuk menangani hal ini. Opsi lain adalah menggunakan server node.js untuk menangani semua permintaan dan meneruskan nilai jalur sebagai argumen lokasi.Dalam express, misalnya, mungkin terlihat seperti ini:
Perhatikan bahwa jalur permintaan sedang diteruskan ke
run
. Untuk melakukan ini, Anda harus memiliki mesin tampilan sisi-server tempat Anda dapat meneruskan HTML yang diberikan. Ada sejumlah pertimbangan lain yang menggunakanrenderToString
dan dalam menjalankan Bereaksi di server. Setelah halaman diberikan di server, ketika aplikasi Anda memuat di klien, itu akan merender lagi, memperbarui HTML yang diberikan sisi-server sesuai kebutuhan.sumber
Di index.html Anda
head
, tambahkan berikut ini:Kemudian ketika menjalankan dengan server dev webpack gunakan perintah ini.
--history-api-fallback
adalah bagian yang pentingsumber
/
makaHashRouter
tidak akan berfungsi (jika Anda menggunakan perutean hash)Saya menggunakan create-react-app untuk membuat situs web sekarang dan memiliki masalah yang sama disajikan di sini. Saya menggunakan
BrowserRouting
darireact-router-dom
paket. Saya menjalankan pada server Nginx dan apa yang dipecahkan untuk saya adalah menambahkan berikut ini/etc/nginx/yourconfig.conf
Yang sesuai dengan menambahkan berikut ini
.htaccess
jika Anda menjalankan AppacheIni juga tampaknya menjadi solusi yang disarankan oleh Facebook sendiri dan dapat ditemukan di sini
sumber
Ini bisa menyelesaikan masalah Anda
Saya juga menghadapi masalah yang sama dalam aplikasi ReactJS dalam mode Produksi. Inilah 2 solusi untuk masalah ini.
1. Ubah riwayat perutean menjadi "hashHistory" sebagai ganti browserHistory sebagai ganti
Sekarang bangun aplikasi menggunakan perintah
Kemudian letakkan folder build di folder var / www / Anda, Sekarang aplikasi berfungsi dengan baik dengan menambahkan # tag di setiap url. Suka
localhost / # / home localhost / # / aboutus
Solusi 2: Tanpa tag # menggunakan browserHistory,
Tetapkan riwayat Anda = {browserHistory} di Router Anda, Sekarang buat dengan sudo npm run build.
Anda perlu membuat file "conf" untuk menyelesaikan halaman 404 tidak ditemukan, file conf harus seperti ini.
buka terminal Anda ketik perintah di bawah ini
cd / etc / apache2 / sites-available ls nano sample.conf Tambahkan konten di bawah ini di dalamnya.
Sekarang Anda perlu mengaktifkan file sample.conf dengan menggunakan perintah berikut
maka ia akan meminta Anda untuk memuat ulang server apache, menggunakan layanan sudo apache2 memuat ulang atau memulai kembali
kemudian buka folder localhost / build Anda dan tambahkan file .htaccess dengan konten di bawah ini.
Sekarang aplikasi berfungsi normal.
Catatan: ubah 0,0.0.0 ip ke alamat ip lokal Anda.
Jika ada keraguan tentang hal ini, jangan ragu untuk mengajukan komentar.
Saya harap ini membantu orang lain.
sumber
"react-router-dom": "^5.1.2"
?, Saya menggunakan<BrowserRouter>
Jika Anda meng-hosting aplikasi reaksi melalui AWS Static S3 Hosting & CloudFront
Masalah ini muncul dengan sendirinya oleh CloudFront merespons dengan pesan 403 Akses Ditolak karena diharapkan ada / beberapa / lainnya / path ada di folder S3 saya, tetapi jalur itu hanya ada secara internal di React's routing dengan react-router.
Solusinya adalah menyiapkan aturan Halaman Kesalahan distribusi. Buka pengaturan CloudFront dan pilih distribusi Anda. Selanjutnya buka tab "Halaman Kesalahan". Klik "Buat Respons Kesalahan Kustom" dan tambahkan entri untuk 403 karena itulah kode status kesalahan yang kami dapatkan. Atur Path Halaman Respons ke /index.html dan kode status ke 200. Hasil akhirnya membuat saya takjub dengan kesederhanaannya. Halaman indeks dilayani, tetapi URL dipertahankan di browser, jadi setelah aplikasi bereaksi dimuat, ia akan mendeteksi jalur URL dan menavigasi ke rute yang diinginkan.
Halaman Kesalahan 403 Aturan
sumber
Server Webpack Dev memiliki opsi untuk mengaktifkan ini. Buka
package.json
dan tambahkan--history-api-fallback
. Solusi ini bekerja untuk saya.Reaksi-router-tutorial
sumber
webpack-dev-server
tetapi bagaimana cara memperbaikinya untuk membangun produksi?Jika Anda meng-hosting aplikasi reaksi di IIS, cukup tambahkan file web.config yang berisi:
Ini akan memberitahu server IIS untuk mengembalikan halaman utama ke klien alih-alih kesalahan 404 dan tidak perlu menggunakan riwayat hash.
sumber
Tambahkan ini ke
webpack.config.js
:sumber
Tumpukan produksi: React, React Router v4, BrowswerRouter, Express, Nginx
1) Pengguna BrowserRouter untuk url cantik
2) Tambahkan index.html ke semua permintaan yang tidak diketahui dengan menggunakan
/*
3) bundel webpack dengan
webpack -p
4) jalankan
nodemon server.js
ataunode server.js
EDIT: Anda mungkin ingin membiarkan nginx menangani ini di blok server dan mengabaikan langkah 2:
sumber
import path from 'path
atauconst path = require('path')
/*
) baru saja menyelamatkan hari saya. Terima kasih! :)Jika Anda menggunakan Create React App:
Ada banyak jalan keluar dari masalah ini dengan solusi untuk banyak platform hosting utama yang dapat Anda temukan DI SINI di halaman Create React App. Sebagai contoh, saya menggunakan React Router v4 dan Netlify untuk kode frontend saya. Yang diperlukan hanyalah menambahkan 1 file ke folder publik saya ("_redirects") dan satu baris kode dalam file itu:
Sekarang situs web saya dengan benar membuat jalur seperti mysite.com/pricing ketika dimasukkan ke dalam browser atau ketika seseorang mengklik menyegarkan.
sumber
Coba tambahkan file ".htaccess" di dalam folder publik dengan kode di bawah ini.
sumber
Jika Anda memiliki fallback ke index.html Anda, pastikan bahwa dalam file index.html Anda memilikinya:
Ini mungkin berbeda dari proyek ke proyek.
sumber
head
: <base href = "/">Jika Anda menggunakan firebase, Anda hanya perlu memastikan bahwa Anda memiliki properti penulisan ulang di file firebase.json di root aplikasi Anda (di bagian hosting).
Sebagai contoh:
Semoga ini bisa menyelamatkan orang lain dari frustrasi dan membuang waktu.
Selamat coding ...
Bacaan lebih lanjut tentang subjek:
https://firebase.google.com/docs/hosting/full-config#rewrites
Firebase CLI: "Konfigurasikan sebagai aplikasi satu halaman (tulis ulang semua url ke /index.html)"
sumber
Saya menemukan solusi untuk SPA saya dengan react router (Apache). Cukup tambahkan .htaccess
sumber: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042
sumber
Saya belum menggunakan rendering sisi server tetapi saya mengalami masalah yang sama dengan OP di mana Link tampaknya berfungsi dengan baik sebagian besar waktu tetapi gagal ketika saya memiliki parameter. Saya akan mendokumentasikan solusi saya di sini untuk melihat apakah itu membantu siapa pun.
JSX utama saya berisi ini:
Ini berfungsi dengan baik untuk tautan yang cocok pertama tetapi ketika: id berubah
<Link>
ekspresi bersarang pada halaman detail model itu, url berubah di bilah browser tetapi konten halaman awalnya tidak berubah untuk mencerminkan model yang ditautkan.Masalahnya adalah saya telah menggunakan
props.params.id
untuk mengatur modelcomponentDidMount
. Komponen hanya dipasang sekali sehingga ini berarti bahwa model pertama adalah yang menempel pada halaman dan Tautan berikutnya mengubah alat peraga tetapi membiarkan halaman tampak tidak berubah.Menyetel model dalam status komponen di kedua
componentDidMount
dan dicomponentWillReceiveProps
( di mana didasarkan pada alat peraga berikutnya) memecahkan masalah dan konten halaman berubah untuk mencerminkan model yang diinginkan.sumber
props
) isocomponentDidMount
jika Anda ingin mencoba rendering sisi server. KarenacomponentDidMount
hanya dipanggil di browser. Tujuannya adalah untuk melakukan hal-hal dengan DOM, seperti melampirkan pendengar acara kebody
dll yang tidak dapat Anda lakukanrender
.Topik ini agak lama dan sudah terpecahkan, tetapi saya ingin menyarankan Anda solusi yang sederhana, jelas, dan lebih baik. Ini berfungsi jika Anda menggunakan server web.
Setiap server web memiliki kemampuan untuk mengarahkan pengguna ke halaman kesalahan dalam hal http 404. Untuk mengatasi masalah ini, Anda perlu mengarahkan pengguna ke halaman indeks.
Jika Anda menggunakan server berbasis Java (kucing jantan atau server aplikasi java apa pun) solusinya bisa sebagai berikut:
web.xml:
Contoh:
Itu dia, tidak perlu lagi sihir :)
sumber
const browserHistory = useRouterHistory(createHistory)({ basename: '/<appname>' });
Jika Anda menggunakan Express atau kerangka kerja lain di backend, Anda dapat menambahkan konfigurasi yang sama seperti di bawah ini dan memeriksa jalur publik Webpack di konfigurasi, itu akan berfungsi dengan baik bahkan saat memuat ulang jika Anda menggunakan BrowserRouter
sumber
Memperbaiki kesalahan "tidak bisa DAPATKAN / URL" saat menyegarkan atau saat memanggil URL secara langsung.
Konfigurasikan webpack.config.js Anda untuk mengharapkan tautan yang diberikan dengan rute seperti ini.
sumber
Saat saya menggunakan .Net Core MVC sesuatu seperti ini membantu saya:
Pada dasarnya di sisi MVC, semua rute yang tidak cocok akan jatuh ke
Home/Index
seperti yang ditentukanstartup.cs
. DiIndex
dalamnya dimungkinkan untuk mendapatkan url permintaan asli dan meneruskannya ke mana pun dibutuhkan.sumber
Jika Anda hosting di IIS; Menambahkan ini ke konfigurasi web saya memecahkan masalah saya
Anda dapat membuat konfigurasi serupa untuk server lain
sumber
Dalam hal, siapa pun di sini mencari solusi pada Bereaksi JS SPA dengan Laravel. Jawaban yang diterima adalah penjelasan terbaik mengapa masalah seperti itu terjadi. Seperti yang sudah dijelaskan Anda harus mengkonfigurasi sisi klien dan sisi server. Dalam templat blade Anda, sertakan file yang dipaket js, pastikan untuk menggunakan
URL facade
seperti iniDi rute Anda, pastikan menambahkan ini ke titik akhir utama di mana templat blade berada. Sebagai contoh,
Di atas adalah titik akhir utama untuk templat blade. Sekarang tambahkan juga rute opsional,
Masalah yang terjadi adalah bahwa pertama templat blade dimuat, lalu router reaksi. Jadi, ketika Anda memuat
'/setting-alerts'
, ia memuat html dan js. Tetapi ketika Anda memuat'/setting-alerts/about'
, itu pertama memuat di sisi server. Karena di sisi server, tidak ada apa pun di lokasi ini, ia mengembalikan tidak ditemukan. Ketika Anda memiliki router opsional itu, ia memuat halaman yang sama dan router reaksi juga dimuat, kemudian bereaksi loader memutuskan komponen mana yang akan ditampilkan. Semoga ini membantu.sumber
/user/{userID}
, saya hanya perlu mengembalikan tampilan/user
HTML universal , membawa ID dan menyebutnya menggunakan AJAX atau aksioma. Apakah mungkin untuk melakukan itu? apakah mereka SEO friendly?Bagi mereka yang menggunakan IIS 10, inilah yang harus Anda lakukan untuk memperbaikinya. Pastikan Anda menggunakan browserHistory dengan ini. Adapun referensi saya akan memberikan kode untuk routing, tetapi ini bukan yang penting, yang penting adalah langkah selanjutnya setelah kode komponen di bawah ini:
Karena masalahnya adalah IIS menerima permintaan dari browser klien, itu akan menafsirkan URL seolah-olah meminta halaman, kemudian mengembalikan halaman 404 karena tidak ada halaman yang tersedia. Lakukan hal berikut:
Dan sekarang akan berfungsi dengan baik.
Saya harap ini membantu. :-)
sumber
Saya menggunakan WebPack, saya memiliki masalah yang sama Solusi => Dalam file server.js Anda
Mengapa aplikasi saya tidak membuat setelah menyegarkan?
sumber
Menggunakan
HashRouter
bekerja untuk saya dengan Redux juga, cukup ganti:untuk:
sumber
Saya memiliki masalah yang sama dan solusi ini bekerja untuk kami ..
Latar Belakang:
Kami meng-hosting beberapa aplikasi di server yang sama. Ketika kami akan menyegarkan server tidak akan mengerti ke mana harus mencari indeks kami di folder dist untuk aplikasi tertentu itu. Tautan di atas akan membawa Anda ke apa yang berhasil bagi kami ... Semoga ini bisa membantu, karena kami telah menghabiskan banyak waktu untuk mencari solusi untuk kebutuhan kami.
Kami menggunakan:
webpack.config.js saya
index.js saya
app.js saya
sumber
Saya suka cara menanganinya. Coba tambahkan: yourSPAPageRoute / * di sisi server untuk menyingkirkan masalah ini.
Saya menggunakan pendekatan ini karena bahkan API Riwayat HTML5 asli tidak mendukung pengalihan yang benar pada refresh halaman (Sejauh yang saya tahu).
Catatan: Jawaban yang dipilih sudah membahas ini, tetapi saya mencoba untuk lebih spesifik.
Rute Ekspres
Diuji dan hanya ingin membagikan ini.
Semoga ini bisa membantu.
sumber