diff --git a/.eslintignore b/.eslintignore
index b0edaaf..c687e96 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,6 +2,9 @@
 test/app/dist
 examples/*/dist
 
+# Test app
+test/app
+
 # Files that use dynamic imports
 test/app/src/routes.js
 examples/dynamic-imports/src/routes.js
diff --git a/.eslintrc.js b/.eslintrc.js
index a62c048..aca9c14 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,20 +4,17 @@ module.exports = {
         node: true,
         browser: true
     },
-    extends: 'eslint:recommended',
+    extends: [
+        'eslint:recommended',
+        'plugin:svelte/recommended'
+    ],
     parserOptions: {
         ecmaVersion: 2019,
-        sourceType: 'module'
+        sourceType: 'module',
+        extraFileExtensions: ['.svelte']
     },
     plugins: [
         'html',
-        'svelte3'
-    ],
-    overrides: [
-        {
-            files: '**/*.svelte',
-            processor: 'svelte3/svelte3'
-        }
     ],
     settings: {
         html: {
diff --git a/Router.svelte b/Router.svelte
index 62c2b57..5ef7089 100644
--- a/Router.svelte
+++ b/Router.svelte
@@ -259,14 +259,14 @@ function scrollstateHistoryHandler(href) {
 
 {#if componentParams}
     <svelte:component
-    this="{component}"
-    params="{componentParams}"
+    this={component}
+    params={componentParams}
     on:routeEvent
     {...props}
     />
 {:else}
     <svelte:component
-    this="{component}"
+    this={component}
     on:routeEvent
     {...props}
     />
diff --git a/package.json b/package.json
index 7ebb3d7..58cfe3d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "svelte-spa-router",
-  "version": "3.3.0",
-  "description": "Router for SPAs using Svelte 3",
+  "version": "4.0.0",
+  "description": "Router for SPAs using Svelte 4",
   "main": "Router.svelte",
   "svelte": "Router.svelte",
   "types": "Router.d.ts",
@@ -20,7 +20,7 @@
   "keywords": [
     "router",
     "svelte",
-    "svelte3",
+    "svelte4",
     "spa"
   ],
   "author": "Alessandro Segala (@ItalyPaleAle)",
@@ -37,14 +37,14 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "chromedriver": "^103.0.0",
-    "eslint": "^8.21.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "nightwatch": "^1.7.3",
-    "rollup": "^2.77.2",
+    "eslint-plugin-svelte": "^2.32.2",
+    "nightwatch": "^1.7.13",
+    "rollup": "^2.79.1",
     "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-svelte": "^7.1.0",
-    "serve": "^14.0.1",
-    "svelte": "^3.49.0"
+    "rollup-plugin-svelte": "^7.1.6",
+    "serve": "^14.2.0",
+    "svelte": "^4.0.5"
   }
 }
diff --git a/test/app/src/App.svelte b/test/app/src/App.svelte
index ada7c94..38ba247 100644
--- a/test/app/src/App.svelte
+++ b/test/app/src/App.svelte
@@ -44,7 +44,7 @@
     <li>
         <a id="dynamic-link-{dl.id}" href={dl.link} use:link use:active>Dynamic Link {dl.id}</a>
          - 
-        <i id="delete-link-{dl.id}" on:click={() => dynamicLinks = dynamicLinks.filter(e => e.id != dl.id)}>delete link</i>
+        <i role="button" id="delete-link-{dl.id}" on:click={() => dynamicLinks = dynamicLinks.filter(e => e.id != dl.id)}>delete link</i>
     </li>
 {/each}
 </ul>
@@ -56,7 +56,7 @@
     <li>
         <a id="disable-link-{dl.id}" href="/foo" use:link={dl.opts} use:active>Dynamic Link {dl.id}</a>
          - 
-        <i id="toggle-link-{dl.id}" on:click={dl.toggle}>
+        <i role="button" id="toggle-link-{dl.id}" on:click={dl.toggle}>
             {#if dl.opts.disabled}
                 enable link
             {:else}