Event Listener for URL Changes? about svelte-router HOT 13 CLOSED

@UIX-Design Hello there. This is not related to the router itself. It depends on your local server configuration. When you enter the URL directly into your browser, the localhost server (node express, Apache, ngnix, etc.) must serve the index.html which is not a default behavior of server - it tried to open a index file in the given directory. I.e. you have to setup rewrite rules to serve the index.html. As soon as the index.html is shown, than the URL changes are done directly by the router.

from svelte-router.

@davidhorak OK thank you for your detailed answer. Later, when I build my Svelte app and deploy to a server, I try to use the following rewrite rules:

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) /index.html [QSA,L]
</ifModule>

Is there a way to fix the problem in the dev environment, so if I'm running npm run dev?

from svelte-router.

@UIX-Design That should work for apache. For the dev, it depends how you run the local server. What does the "dev" script do/runs?

from svelte-router.

@davidhorak the dev script run the following commands:

"dev": "run-p build:auto serve:dev"

Another question: The activeClass works great, but i am using a dropdown menu like this:

{#if open}
    <nav in:slide out:slide class="">
       //my dropdown menu
    </nav>
{/if}

The activeClass does not keep on my dropdown menu if it is not displayed again. How can I solve this?

from svelte-router.

@UIX-Design Assuming that "serve:dev" is webpack dev server than - https://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route

from svelte-router.

@davidhorak thanks for sharing the link, but how can i edit or expand the webpack.config.js? I am a newcomer of Svelte... And please take a look at my updated comment to my activeClass Issue... Thanks for your help

from svelte-router.

@UIX-Design Respectfully, this is not related to Svelte, nor this router repository, rather the webpack basics, please explore the https://webpack.js.org/guides/getting-started/ to see how to setup the webpack config.

from svelte-router.

@UIX-Design Regarding the activeClass, also not sure if this is related to the router, but rather to your app structure.

from svelte-router.

@davidhorak When i open my dropdown and click on a link:

The activeClass is hello - looks good

After i close and open the dropdown again...

The active link does not retain the activeClass even though the page has not been left...

from svelte-router.

@davidhorak I think i have a solution for my activeClass Issue... It is possible to get the current route, inside a component?

from svelte-router.

@UIX-Design yes, https://github.com/spaceavocado/svelte-router#auto-passed-route-prop

from svelte-router.

@davidhorak thank you very much. One last question: It is possible to use the Link Events like on:completed={handleOnCompleted} on the router layer, maybe inside the createRouter function? Because i want to pass a prop to my header comp, there is located in the App.svelte - the same place for my route config.

from svelte-router.

@UIX-Design you can you these router level event handlers: https://github.com/spaceavocado/svelte-router#onnavigationchanged https://github.com/spaceavocado/svelte-router#onerror or https://github.com/spaceavocado/svelte-router#onbeforenavigation

from svelte-router.