Hi thanks for developing this! I'm trying to use it with the svelte 3 webpack template and I followed all the instructions but I get the following error when I try to npm run dev:

ERROR in ./node_modules/svelte-easyroute-webpack/RouterLink.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="router-link" on:click={navigateRouter}>
| {#if text && text !== ""}
| {text}
 @ ./src/App.svelte 15:0-67 20:23-33 22:23-33
 @ ./src/main.js
 @ multi ./src/main.js

If I edit my webpack.config.js to remove exclude: /node_modules/ under rules, it removes the error and everything works fine. Is this the intended way to set up the router? I'm not all that familiar with webpack, so the default setting of exclude: /node_modules/ came from the svelte webpack template

Here's a link to my project repo (it's just a very simple scaffold), where I noted the line in the webpack.config.js file: https://github.com/ejolly/svelte_frontend_driven

nice work! is there some way to use nested route like vue-router
router : {children:[{ path: 'somePath', component: InnerComponent }]}
template: <router-view>

I have a simple router:

const router = new Router({
	mode: 'hash',
	routes: [
		{
			path: '/',
			name: 'layout',
			component: MainLayout,
			children: [
				{
					path: '',
					name: 'Dashboard',
					component: Dashboard,
					meta: {
						title: 'Dashboard',
					},
				},
			],
		},
		{
			path: '/login',
			name: 'login',
			component: Login,
			meta: {
				title: 'Login',
				allowAnonymous: true,
			},
		},
	],
})

router.beforeEach = async (to, from, next) => {
	if (!to.meta.allowAnonymous && get(userStore) == null) {
		next('/login')
	} else {
		document.title = to.meta.title
			? `${to.meta.title} | ${window.config.appName}`
			: window.config.appName
		next()
	}
}

export default router

when I try to navigate to /login, this works nicely, but as soon as I try to navigate to the dashboard, I'm getting this error in the console:

svelte-easyroute.umd.js:1 Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
at e (svelte-easyroute.umd.js:1)
at e.parsePaths (svelte-easyroute.umd.js:1)
at e.getPathInformation (svelte-easyroute.umd.js:1)
at new e (svelte-easyroute.umd.js:1)
at create_fragment$2 (App.svelte:3)
at init (index.mjs:1451)
at new MainLayout (App.svelte:3)
at Object.update [as p] (RouterOutlet.svelte:72)
at update (index.mjs:733)
at flush (index.mjs:702)

In the previous version (2.1.0) I used this pointed to PathService.parsePaths if that helps you.

So I tried to clone your repo and try the demo app, but that doesn't seem to work for me either. There I'm receiving

Cannot GET /

I didn't change anything in your example project, just installed necessary npm modules.

Can you help me with this please?

I have a simple project setup with Svelte + Snowpack (with Typescript).
Trying to get started with this router seems not straighforward as it could be.

I'm receiving this in chrome console:

Здравствуйте, Алексей.

Прежде всего хочу вас поблагодарить за роутер для Svelte. Профессиональная, масштабная и доведенная до конца работа. Использую его в своем последнем проекте.

Вопрос у меня такой. Один из связанных с роутером компонентов содержит такой фрагмент:

<figure>
    {#await DOTLoader}
        <p class="graph-waiter">Ожидаются данные...</p>
    {:then data}
        <Graph {data} />
    {:catch error}
        <p class="graph-error">{error}<p>
    {/await}
    <figcaption>
            <a target="_blank" href={url}>{name} в Википедии</a>
    </figcaption>
</figure>

Полный его код здесь .

Пока я перехожу по другим ссылкам роутера, всё работает хорошо. Как только открываю этот компонент - переходы по прочим ссылкам перестают работать.

Похоже, дело в асинхронности, но как отладить - не соображу, подскажите, пожалуйста.

This router have any package we can install from to get typing ?

Importing anything from 'svelte-easyroute' eslint warning about not found types for it.

Hi, first off, this router looks really promising! Nice work!

While playing around with it in a sandbox, I noticed that currentRoute is never populated on the initial load. It is only set when switching to another page - is this a bug? Please see the console at:

https://codesandbox.io/s/svelte-easyroute-simpliest-demo-forked-2k18c

One more thing, the beforeEach doesn't seem to work properly either, the fullPath is always identical on both from and to.

Another thing that I noticed is that apparently, useCurrentRoute currently doesn't return a plain readable Svelte store. If it did, it would make the boilerplate for each component a bit more compact (using reactive $ code), and you would not have to unsubscribe manually. Any thoughts on this?

Hi,

Thanks for this router, it was working perfectly until the last update. Now I am getting RouterOutlet is not defined when using Rollup. I can see in router.js that the line // import RouterOutlet from './RouterOutlet.svelte' is commented out. Was this done in error?

If I uncomment that line everything works again.

Thanks for you help!

I'm getting an error with the default svelte rollup template and it looks like this packages deps are all WebPack based.

Vue router has a really nice property on routes called props. If set to true, it dispatches all the route params to the displayed component.

It could be something like:

    {#if firstRouteResolved}
        <svelte:component 
            this={currentComponent} 
            currentRoute={routeData} 
            router={_router} 
            outlet={outletElement} 
            {...(_router.currentRoute.props && _router.currentRouter.params)}
          />
    {/if}

Note that I'm very new at Svelte.

There's also a 'function' mode to route props. One missed opportunity of vue-router is to not have async functions as props: you could have an async function that loads data, and the route switches only when the data is loaded.

Add a function prop to allow navigation to a requested route to simplify guarding rather than using component's onMount.

Please check out: https://codesandbox.io/s/svelte-easyroute-simpliest-demo-forked-8vku7

Without enabling the fallback route (currently commented out), there's no way to gracefully recover from an unknown route. If you click on 'Page Unknown' and then try to load 'Page 2' again, it won't work. The nested outlet remains blank (likely because it isn't there anymore, because Layout has been unloaded as well). Going to 'Page 1' first, then to 'Page 2' does work.

While you can work around this (using the fallback route), I believe a valid route should recover itself without any special care from the developer.