How to use page.js with SVELTE and retain dynamic route content while editing

Question

I am using page.js with SVELTE and it works.

The problem:

My app lets users store data via a form and the data is stored in indexedDB (I am using Dexie.js to talk to IndexedDB). The stored data is used to create dynamic routes.

Example:

A user submits data called "client" and data is stored in indexedDB as:

clients = [{name:"Stackoverflow", id:0}, {name:"Google", id:1}] 

I then create dynamic routes (using page.js) that look like this:

http://localhost:5000/client/0/dashboard

The problem is as follows,

When I go to a dynamic route and edit components that make up the page (even CSS) upon saving my work, the entire app refreshes. In order to get back to my dynamic route I can't just type the URL - I have to go back to the landing page, find the link of the submitted item, click it and be redirected to the desired page.

Is there a way to make this easier so that I can edit without that happening? The landing page and other static pages do not have this problem.

Answer 1

Not sure if this helps but did you add the --single switch to the end of the call to sirv in the package.json 's start script?

so your package json should contain something like

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  },

(only the line starting with "start" is relevant. The crucial bit is --single ).

Also the declaration of your route for page.js should be something like /client/:id/dashboard .