Roteamento no frontend

O roteamento no frontend é uma forma popular de alternar entre visualizações em uma aplicação de página única. Este guia apresenta as abordagens recomendadas para diferentes frameworks de frontend ao usar o 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,
    }}
/>

Por que usar roteamento baseado em hash?

O Wails incorpora seu frontend a uma janela de webview nativa. O uso de roteamento baseado em hash (#/page em vez de /page) evita conflitos com:

• O roteamento interno do runtime do Wails
• O processamento de URLs de janelas nativas em diferentes plataformas
• Os ativos de produção servidos a partir de caminhos que não estão na raiz

Solução de problemas

Se você estiver enfrentando problemas com o roteamento no frontend em builds de produção:

• Verifique se a ferramenta de build do frontend está configurada para gerar a saída para roteamento no modo hash
• Em projetos baseados no Vite, adicione base: "./" ao seu vite.config.js
• Verifique se o seu index.html processa corretamente o fallback do roteamento de SPA