example of routing idea

src/components/UI/Sidebar.svelte

@@ -33,7 +33,7 @@
               </i>
               <a
                 class="flex flex-col"
-                href="account/{account._id}"
+                href="account/{account.slug}"
                 rel="prefetch"
                 on:click={() => (toggle = !toggle)}>
                 <h3 class="text-base">{account.accountName}</h3>

src/routes/project/[...slug].svelte → src/routes/account/[...id].svelte

@@ -1,21 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
     console.log("params in project", { params });
-    let [account, project] = params.slug;
+    let [account, project] = params.id;
 
     return { account, project };
   }
 </script>
 
 <script>
+  import { onMount } from "svelte";
+
   export let account, project;
+  onMount(() => {
+    // here you can call the API passing the account and project parameters
+  });
 </script>
 
-<!-- src/routes/blog/[...slug].svelte -->
 <svelte:head>
   <title>Individual project</title>
 </svelte:head>
 <h1>Individual project</h1>
 
-<p>account id => {account}</p>
-<p>project id => {project}</p>
+<p>account id: {account}</p>
+<p>project id: {project}</p>

src/routes/account/[_id].svelte → src/routes/account/[slug].svelte

@@ -2,26 +2,22 @@
   import * as api from "api.js";
 
   export async function preload(page, session) {
-    console.log("page in [_id.svelte]", page);
-    console.log("session in [_id.svelte]", session);
-    const { _id } = page.params;
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
+    const { slug } = page.params;
 
-    const res = await api.get(
-      `accounts/${_id}`,
-      session.token,
-      session.user._id
-    );
-    const accountData = res.data;
+    const res = await api.get(`accounts/${slug}`, session.token, session.user._id);
+    const accountData = res.data[0];
 
-    console.log("individual acount _id", accountData);
+    console.log("server account data:", accountData);
 
     return { accountData };
   }
 </script>
 
 <script>
   export let accountData;
-  console.log("client _id", accountData);
+  console.log("client accountData:", accountData);
 
   $: projects = accountData.projects;
 
@@ -40,9 +36,10 @@
   {#if projects}
     {#each projects as project}
       <li>
+        <!-- Account url will be slug param from api response object -->
         <a
           class="hover:underline text-blue-500"
-          href="project/{accountData._id}/{project._id}"
+          href={`account/${accountData.slug}/${project._id}`}
           rel="prefetch"
           id={project._id}>
           {project.projectName}

src/routes/accounts.svelte

@@ -12,7 +12,7 @@
       <li>
         <a
           class="hover:underline text-blue-500"
-          href="/account/{account._id}"
+          href="/account/{account.slug}"
           rel="prefetch"
           id={account._id}>
           {account.accountName}