spaceavocado / svelte-router Goto Github PK

whats is the Status of this project? Is this project dead?

I want to integrate Matomo in my Svelte SPA?

I found this code in the Matomo Developer Guide:

window.addEventListener('hashchange', function() {
        _paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
        _paq.push(['setDocumentTitle', 'My New Title']);
        _paq.push(['trackPageView']);
});

How can use this code with your router? Could you help me?

When navigating by name to HOME link should be relative not absolute

{
        path: "/",
        name: "HOME",
        component: Todos
      },
...
<RouterLink to={{ name: 'HOME' }}>Home</RouterLink>

When using web application server to serve svelte app there is problem(http://localhost:8080/svelte/):

• no rote can be found so Todos is not showen
• when navigation by RouterLink Home then url is http://localhost:8080/

``

Try a route such as /foo/:bar? and navigate to /foo. It will crash in isWholeNumber trying to check whether the param bar is a number (which is undefined).

bundle.js:35421 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'match')
    at isWholeNumber (bundle.js:35421:13)
    at resolveNumber (bundle.js:35611:10)
    at setParamValue (bundle.js:35625:26)
    at createRouteRecord (bundle.js:35640:6)
    at Router.matchRoute (bundle.js:36232:25)
    at Router.resolveRoute (bundle.js:36181:19)
    at Router.push (bundle.js:35904:13)
    at Router.onHistoryChange (bundle.js:36090:15)
    at Router.start (bundle.js:35787:13)
    at bundle.js:36989:13

Hi there.. the router store is not updating or reacting..

My guess that is not creating an object or array brand new.. causing Svelte not realizing that the object/store has changed.

Anyway.. many thanks!
=)

In my Page Components, i use the <svelte:head> like this:

<svelte:head>
    <title>Website Title</title>
    <meta name="description" content="Website Description">
</svelte:head>

But when i switch between my pages, the svelte:head doesn't update... I always see the title and meta content from my Home Component.

When i use the svelte router package svero i don't have these issue...
How can i solve this?

With the following code:

<RouterLink to="{{name: 'ABOUT'}}" class="navItem">About</RouterLink>

The class navItem is not passed to the generated a tag. In the console there's a message from link.svelte:86 that state: <Link> was created with unknown prop 'class'</Link>.

So it seems that handling for passing through attributes is missing(?).

In some places in the docs, e.g. onNavigationChanged you say that the callback params are (to, from), and then in other places, e.g. /component/view.svelte:58, you say it's (from, to). Which one is it? When I run onNavigationChanged, it looks like (from, to) to me.

I define route:

{
        path: "/photos/:id(\\d+)",
        name: "Photos",
        component: Photos
}

In Photos I define:

export let id;

In RouterLink I define:

let photoId = 5;

<RouterLink to={{ name: 'Photos', parms: { id: photoId } }}>
          Photos
</RouterLink>

And routing to component Photos not working in console is error:

svelte-router/link, invalid route parameters, :TypeError: Expected "id" to be a string

<RouterLink to={{ name: 'test', query: { a: 'x&b=2' } }}>Click</RouterLink>

This will create a bad URL like /test?a=x&b=2 (which will actually set { a: 'x', b: '2' }) instead of the expected URL /test?a=x%26b%3D2.

On the other hand, the query in route.query also isn't decoded. Both would need to be done to fix this issue.

If I write the link by hand in the address bar, the router works, switching to the desired view, but
when selecting the link produced by:

<RouterLink to={{name: 'Widgets'}}>Widgets</RouterLink>

(which is equal to the one entered by hand) the URL changes, but the page doesn't and the console displays the error:

TypeError: de is undefined

in module.js:1:4303, which is minified (it has inside this extract ... if(ue.has(e))return;ue.add(e),de.c.push(()=>{ue.delete(e),s&&(n&& ...)

my package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.10.2",
    "@spaceavocado/svelte-router": "^1.0.13",
    "bulma": "^0.7.5",
    "npm-run-all": "^4.1.5",
    "rollup": "^1.12.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "svelma": "0.0.11",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "@babel/core": "^7.5.5",
    "sirv-cli": "^0.4.4"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev"
  }
}

Hi,
thank you very much for this repo. It works very good, but my router doesn't work, when i manual change the URL in the URL Bar. I get a 404 Not Found Error...

My App.svelte looks like this:

import createRouter from '@spaceavocado/svelte-router';
import {ROUTER_MODE} from '@spaceavocado/svelte-router';
import RouterView from '@spaceavocado/svelte-router/component/view';

import Home from './pages/Home.svelte'
import Technic from './pages/Technic.svelte'

createRouter({
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/solutions/technic',
        name: 'Technic',
        component: Technic
      },     
    ],
    mode: 'HISTORY',
    hashType: 'PUSH',
  })

How can i solve the problem?

Navigating (programatically and manually) from an url like https://example.com/myComponent/param1 to https://example.com/myComponent/param2 is not triggering myComponent updates. Doing a simple

<script>
  export let url;
  console.log(url);
</script>

Logs the first URL once.

Is this a Svelte shortcoming or a bug? Is there any workaround?

Sorry to be peppering you with questions. Is there any support for transitions between routes, like https://github.com/alshdavid/crayon? Looks like they do it via applying and removing classes. However, I like your method of doing the <RouterLink to="/"> component better than their method of <button on:click={() => nav.navigate('/')}>.

This is probably beyond the scope, but shared element transitions would be cool too: https://dev.to/buhrmi/svelte-component-transitions-5ie

Tell me what you think of this. In link.svelte, change line 73 to

on:click|preventDefault="{(e) => !e.target.closest('.preventNavigation') && navigate(to)}"

That gives us the ability to mark certain elements to not trigger nav. I don't know if this affects performance at all.

In my case, I have a list of link cards. Most of the card should navigate on click, but there are interactive elements on the cards.