细长的路由链接删除了 electron 中的基本路径

Question

I am working on an Electron.js application, utilizing Svelte as my frontend framework. I am using the svelte-routing library for routing:

<Router>
    <Route path="">
      //Home Page
      <Link to="subpath">
    </Route>

      <Route path="subpath">
        //Subpath
      </Route>
</Router>

When a link is clicked it removes the base path, leaving only the subpath: I get: file:///subpath instead of file:///path/to/project/public/index.html in window.location .

The routing still works but when electron performs a hot reload all I get is a blank screen, and an error: Not allowed to load local resource: file:///subpath

How can I fix this?

Answer 1

Hash routing would solve this. For example, instead of using a path /about , you'd use #/about . In electron terms, that means file:///path/to/index.html#/about

Unfortunately svelte-routing does not support hash # routing.

One router that expressly supports it is @jamen/svelte-router (there may be others).

Here is an example usage of @james/svelte-router :

<!-- App.svelte -->
<script>
  import {Router} from '@jamen/svelte-router'
  import Home from './screens/Home.svelte'
  import About from './screens/About.svelte'

  const routes = {
    "/": Home,
    "/about": About
  }
</script>

<Router {routes}/>