Frontend-Routing

Frontend-Routing ist eine verbreitete Methode, um in einer Single-Page-Anwendung zwischen Ansichten zu wechseln. Dieser Leitfaden beschreibt die empfohlenen Ansätze für verschiedene Frontend-Frameworks bei der Verwendung von Wails.

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
});

RouterModule.forRoot(routes, { useHash: true });

import ReactDOM from "react-dom/client";
import { HashRouter, Routes, Route } from "react-router-dom";

ReactDOM.createRoot(root).render(
  <HashRouter basename={"/"}>
    {/* The rest of your app goes here */}
    <Routes>
      <Route path="/" element={<Page0 />} />
      <Route path="/page1" element={<Page1 />} />
      <Route path="/page2" element={<Page2 />} />
      {/* more... */}
    </Routes>
  </HashRouter>
);

<script>
    import Router from "svelte-spa-router";
</script>

<Router
    routes={{
        "/": Home,
        "/products": wrap({
            asyncComponent: () => import("./routes/Products.svelte"),
        }),
        "/settings": Settings,
        "*": NotFound,
    }}
/>

Warum Hash-Routing?

Wails bettet Ihr Frontend in ein natives Webview-Fenster ein. Hashbasiertes Routing (#/page anstelle von /page) vermeidet Konflikte mit:

• dem internen Routing der Wails-Laufzeit
• der nativen Verarbeitung von Fenster-URLs auf verschiedenen Plattformen
• Produktions-Assets, die unter anderen URL-Pfaden als dem Root-Pfad bereitgestellt werden

Fehlerbehebung

Wenn bei Produktions-Builds Probleme mit dem Frontend-Routing auftreten:

• Stellen Sie sicher, dass Ihr Frontend-Build-Tool für die Ausgabe von Routing im Hash-Modus konfiguriert ist
• Fügen Sie bei Vite-basierten Projekten base: "./" zu Ihrer vite.config.js hinzu
• Überprüfen Sie, ob Ihr index.html den Fallback für SPA-Routing korrekt verarbeitet