spaceavocado/svelte-router

Event Listener for URL Changes?

UIX-Design opened this issue · 13 comments

UIX-Design commented

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?

davidhorak commented

@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.

UIX-Design commented

@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?

davidhorak commented

@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?

UIX-Design commented

@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?

UIX-Design commented

@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

davidhorak commented

@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.

davidhorak commented

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

UIX-Design commented

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

The activeClass is hello - looks good

Bildschirmfoto 2019-09-03 um 15 34 53

After i close and open the dropdown again...

Bildschirmfoto 2019-09-03 um 15 35 52

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

UIX-Design commented

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

UIX-Design commented

@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.