Routage frontend

Le routage frontend est une méthode courante pour passer d’une vue à une autre dans une application monopage. Ce guide présente les approches recommandées pour différents frameworks frontend avec 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,
    }}
/>

Pourquoi utiliser le routage par fragment ?

Wails intègre votre frontend dans une fenêtre de vue web native. L’utilisation du routage basé sur des fragments (#/page au lieu de /page) évite les conflits avec :

• Le routage interne du runtime Wails
• La gestion native des URL des fenêtres sur les différentes plateformes
• Les ressources de production servies depuis des chemins autres que la racine

Résolution des problèmes

Si vous rencontrez des problèmes de routage frontend dans les builds de production :

• Assurez-vous que votre outil de build frontend est configuré pour produire une sortie destinée au routage en mode hash
• Pour les projets basés sur Vite, ajoutez base: "./" à votre vite.config.js
• Vérifiez que votre index.html gère correctement le mécanisme de repli pour le routage des applications monopages