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: "./" ke vite.config.js Anda
Verifikasi index.html Anda menangani fallback dengan benar untuk SPA routing