Routing Frontend
Routing frontend adalah cara populer untuk beralih tampilan di aplikasi single-page. Panduan ini mencakup pendekatan yang direkomendasikan untuk berbagai framework frontend saat menggunakan Wails.
Pendekatan yang direkomendasikan untuk routing di Vue adalah Hash Mode:
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
});Hash mode menggunakan hash URL untuk merender tampilan berbeda, menghindari masalah runtime Wails yang mengganggu routing dengan format URL berbasis hash.
Pendekatan yang direkomendasikan untuk routing di Angular adalah HashLocationStrategy:
RouterModule.forRoot(routes, { useHash: true });Menggunakan URL berbasis hash memastikan routing bekerja dengan benar dengan penanganan window Wails di semua platform.
Pendekatan yang direkomendasikan untuk routing di React adalah HashRouter:
import ReactDOM from "react-dom/client";
import { HashRouter, Routes, Route } from "react-router-dom";
ReactDOM.createRoot(root).render(
<HashRouter basename={"/"}>
{/* Sisa aplikasi Anda di sini */}
<Routes>
<Route path="/" element={<Page0 />} />
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
{/* lainnya... */}
</Routes>
</HashRouter>
);HashRouter menggunakan hash URL alih-alih path, yang bekerja andal dengan Wails di semua platform.
Pendekatan yang direkomendasikan untuk routing di Svelte adalah svelte-spa-router:
<script>
import Router from "svelte-spa-router";
</script>
<Router
routes={{
"/": Home,
"/products": wrap({
asyncComponent: () => import("./routes/Products.svelte"),
}),
"/settings": Settings,
"*": NotFound,
}}
/>svelte-spa-router mendukung routing berbasis hash, sehingga kompatibel dengan aplikasi Wails.
Mengapa Hash Routing?
Wails menyematkan frontend Anda ke dalam window webview native. Menggunakan routing berbasis hash (#/page alih-alih /page) menghindari konflik dengan:
- Routing internal runtime Wails
- Penanganan URL window native di platform berbeda
- Aset produksi yang disajikan dari path non-root
Troubleshooting
Jika Anda mengalami masalah dengan routing frontend di build produksi:
- Pastikan build tool frontend dikonfigurasi untuk output hash mode routing
- Untuk proyek berbasis Vite, tambahkan
base: "./"kevite.config.jsAnda - Verifikasi
index.htmlAnda menangani fallback dengan benar untuk SPA routing