jikkai/svelte-router

Router component for Svelte

Hi there, I'm 白熱! 👋

svelte-router's Issues

'active' class on the Link

How would you implement adding an 'active' class to each Link with an href matching the current path? It's hard to build a navigation menu without that.

Is there a way to pass data into route components?

Hey there!
So i'm kinda new to Svelte js - and am experimenting with using it for a small upcoming project.
Just wondering if there's a trick to getting the store to be passed down to the route
components...?

I'm currently using: "svelte: ^1.47.1"

Store is currently created and passed into the app like so:
index.js (webpack entry):

import App from './app.html';
import { Store } from 'svelte/store.js';

const store = new Store({
  animal: 'dog',
  sheep: 'baaah',
});

const app = new App({
  target: document.body,
  store,
});

export default app;

app.html:

<div>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/welcome">Welcome</RouterLink>
  <h1>animal: {{$animal}}</h1>
  <div id="app"></div>
</div>

<script>
  import { createRouter, RouterLink } from 'svelte-router'
  import Home from './home.html'
  import Welcome from './welcome.html'

  const router = createRouter({
    '/': Home,
    '/welcome': Welcome
  });

  export default {
    oncreate () {
      console.log(this.store.get('animal')); // "dog"
      router.create('#app');
    },

    ondestroy () {
      router.destroy()
    },

    components: { 
    	RouterLink, Home, Welcome
    }
  }
</script>

home.html:

<h1>home page!</h1>
<script>
export default {
  oncreate () {
    console.log(this.store.get('animal')); // undefined
  },
}
</script>

inside app.html:
<h1>animal: {{$animal}}</h1>
renders as:
<h1>animal: dog</h1>
as expected.

If i try and access:
<div>{{$animal}}</div>
from home.html, i get the following error:
Uncaught TypeError: Cannot read property '_init' of undefined

Example get route param

How to get param from router

<RouterLink to="/doc/123">Document</RouterLink>

How to get param document_id in DocumentDetail component

export default {
  mode: 'history',
  routes: {
    '/': Home,
    '/doc': Document,
    '/doc/:document_id':DocumentDetail,
    default: NotFound
  }
}

Thank you.

I think we should rename createRouter

Right now "createRouter" when exist "create" function also createRouter contain proxy like methods to History.

Error: 'Link' is not exported by node_modules/svelte-router/lib/svelte-router.js

Hey, maybe I am doing something wrong, but I started by just copy/past the exemple(https://jikkai.github.io/svelte-router/#/guide/basic-usage)
and this Error keeps poping in
Error: 'Link' is not exported by node_modules/svelte-router/lib/svelte-router.js

my version is svelte-router": "^3.0.0-alpha.2"

Thx for the help ! :)

Do we need to supply routes in an object and as declarations?

Hi,

I'm looking at using your router but am wondering why I need to supply routes both declaratively <RouterLink> and as an object createRouter({})

Thanks

Trouble compiling with rollup

Windows 10, node 6.0.0

Error: Error: 'default' is not exported by node_modules\svelte-router\lib\svelte-router.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src\HelloWorld.html (1:7)
1: import SvelteRouter from 'svelte-router'

Using:

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

svelte-router/blob/master/src/index.js is different from npm installed node_modules/svelte-router/lib/svelte-router.js? Investigating...

Using a tilde in an import statement is a webpack specific thing? e.g. import createRouter from '~utils/create-router' (from https://stackoverflow.com/a/39535907)

How does listen work?

I don't see an example. I want to execute a function when a route triggers, for example check if the user is logged in and then if not redirect them to /login?ref=<original-path>

Feature request: add support for nested routes

It would be super neat to see svelte-router become as mature as vue-router.

One big feature that would be nice is nested routes, much like how vue-router handles them:
https://router.vuejs.org/guide/essentials/nested-routes.html

Example:

...
routes: {
  '/settings': {
    children: {
      'contact': {
        ...
      }
    }
  }
}

Or better yet, use the array structure vue-router uses to make it easier to manage and iterate through them wherever necessary.