pateketrueke / yrv Goto Github PK

REPL: https://svelte.dev/repl/339508656b994703a75f3e99c4f47d8c?version=3.20.1

Going on /players I expect to appear.

How come it doesn't appear?

Workaround: href=" "

@pateketrueke thank you for the great work on YRV. We've heavily used it with that.us (github.com/thatconference/that.us).

I don't know if I am doing something wrong, or if it's just not supported but is there a way to support cmd+click where you open that link in a new window?

Thanks!
Clark

When I use Link inside component that is loaded into Route, clicking on the link causes error:

When Link is used outside the Router it works correctly

<Link>link</Link>

<Router>
  <Route>
</Router>

// Also using inside component loaded to Route does not work.
navigateTo(path)

Hope I explained well the issue.

Any help is appreciated.

@pateketrueke I know we just added #58 but we introduced a new issue that I'd be happy to fix.

Because we added the check for e.target.tagName === 'A' we limited ourselves to "only" handling the click on an anchor tag. But in cases like mine very often we're wrapping something in the anchor like so:

     <Link
        href="{l.href}"
      >
        <div class="flex items-center">
          <svg class="h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M11 0h3L9 20H6l5-20z"></path>
          </svg>
          <span>{l.text}</span>
        </div>
      </Link>

ref: https://github.com/ThatConference/that.us/blob/master/src/components/nav/mainNav/Desktop.svelte#L11-L25

I think we should remove the check for A all together. The right thing should occur and bubble our since we're already taking our and binding our own onClick fuunciton.

Thoughts?

When declaring routes like:

<Route path="/some-path" component={Page}>
<Route fallback component={PageNotFound} />

i expect that path "/some-path/params" will lead just to Page component, but now i get both Page and PageNotFound.

Example
https://svelte.dev/repl/3678130b9358496eabf8c84aabf7f2c3?version=3.20.1

Hi,

Thanks for an excellent svelte router.

How would one pass props to routed components?

E.g.:
<Route exact path="/#faq" component={<FAQ prop1=true/>} /> ? (this doesn't work)

How do I instruct yrv to ignore anchor fragments?

REPL: https://svelte.dev/repl/8b0565744d414abd88c2d8e42cccb6a8?version=3.20.1

I expect to see /notfound NotFound fallback route component.

Why not?

Thanks for your work, yrv is amazing.

Taking your example:

<Router path="/auth">
  {#if !loggedIn}
    <Route exact redirect="/auth/login" />
  {:else}
    <Route exact>Welcome back.</Route>
  {/if}

  <Route path="/protected" condition={() => loggedIn} redirect="/auth/login">O.K.</Route>
  <Route path="/login">Log-in</Route>
</Router>

Why can't we rewrite it like this instead?

<Router path="/auth" condition={() => loggedIn} redirect="/auth/login">
  <Route exact>Welcome back.</Route>
  <Route path="/protected">O.K.</Route>
</Router>
<Router path="/auth" condition={() => !loggedIn} redirect="/auth">
  <Route exact path="/login">Log-in</Route>
</Router>

What do you think about this?

I think we need redirect on Router because I can have many routes like this:

<Router path="/auth" condition={() => loggedIn} redirect="/auth/login">
  <Route exact>Welcome back.</Route>
  <Route path="/protected">O.K.</Route>
  <Route path="/protected/something">O.K.</Route>
  <Route path="/protected/players">O.K.</Route>
  <Route path="/protected/another">O.K.</Route>
</Router>
<Router path="/auth" condition={() => !loggedIn} redirect="/auth">
  <Route exact path="/login">Log-in</Route>
</Router>

Am I wrong?

UPDATE:

I can also use it like this:

<Router condition={() => loggedIn}>
  <Route exact>Welcome back.</Route>
  <Route path="/protected">O.K.</Route>
  <Route path="/protected/something">O.K.</Route>
  <Route path="/protected/players">O.K.</Route>
  <Route path="/protected/another">O.K.</Route>
</Router>
<Router condition={() => !loggedIn}>
  <Route exact redirect="/login" />
  <Route exact path="/login">Login</Route>
</Router>

I’m using this with snowpack and ran into the error pasted below.

I traced this to having svelte version ^3.4.4 hardcoded in the devDependencies. When updated to latest 3.17.3 and rebuilding, the snowpack import works fine.

I didn’t have time to bisect this to find out which version of svelte broke this.

- snowpack installing... 
Error: 'on_outro' is not exported by node_modules/svelte/internal/index.mjs
    at error (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:5330:30)
    at Module.error (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:9733:16)
    at handleMissingExport (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:9634:28)
    at Module.traceVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:10072:24)
    at ModuleScope.findVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:8679:39)
    at FunctionScope.findVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:3015:38)
    at ChildScope.findVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:3015:38)
    at FunctionScope.findVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:3015:38)
    at ChildScope.findVariable (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:3015:38)
    at Identifier$1.bind (/Users/jan/Work/timeliner/node_modules/rollup/dist/rollup.js:4353:40)

Heya!

yrv works great, thank you! One quick question - how do I style a link? For example, I have:

<Link href="/{work.slug}" class="link">

which becomes:

<a href="/boomsaas" class="link" title="">

But if I try and style using a class "link" svelte complains the selector is unused:

Error: css-unused-selector

.link {
    width: 100%;
  }

How can I style a Link/a element?

Thanks! 😃

I have a simple route setup, that i can't get to work.

/foos
/foo/:id

<Route exact path="/foos" component={foosComponent} /> <Route exact path="/foo/:id" component={fooComponent} /> <Route fallback>404 Not found</Route>

Foos is a list
Foo refers to a specific item.

When i'm on a specific item i would like to use fragment based routing to allow the user to scroll to certain items on the page, however the router thinks it's a route attempt and redirects to the fallback.

so /foo/123#someItem takes me to the fallback route

how do i define the route for foo so that it optionally can have a fragment parameter? and stays on the same component?

The full text of the issue is

index.mjs?017d:1558 Uncaught (in promise) Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs?017d:1558)
    at new Dashboard (dashboard.svelte?6e88:435)
    at Array.ut (yrv.es.js?4cd2:1)
    at it (yrv.es.js?4cd2:1)
    at Object.p (yrv.es.js?4cd2:1)
    at q (yrv.es.js?4cd2:1)
    at B (yrv.es.js?4cd2:1)

I initially thought this was due to the fact that I had created a wrapper component for the index / routes setup, so I instead moved the page in question to simply use the router / route elements directly with the same results.

My webpack config is

const { resolve } = require('path');
const { ProvidePlugin } = require('webpack');
const CssPlugin = require('mini-css-extract-plugin');
const HtmlPlugin = require('html-webpack-plugin');

const fromRoot = (...args) => resolve(process.cwd(), ...args);
const fromSrc = (...args) => fromRoot('src', ...args);

const { NODE_ENV = 'development' } = process.env;

module.exports = {
  target: 'web',
  mode: NODE_ENV,
  resolve: {
    extensions: ['.svelte', '.mjs', '.js', '.json'],
    alias: {
      '@': fromSrc('.'),
      'svelte': fromRoot('node_modules', 'svelte'),
      'config': fromRoot('configs/browser_config.json')
    }
  },
  entry: {
    dashboard: fromSrc('dashboard.js')
  },
  output: {
    path: fromRoot('dist'),
    filename: '[name].[hash].js',
    chunkFilename: '[id].js'
  },
  devServer: {
    host: '0.0.0.0',
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            dev: true, // setting to false or removing this line removes the error.
          }
        }
      },
      {
        test: /\.css$/,
        use: [{
          loader: CssPlugin.loader,
          options: {
            hot: NODE_ENV === 'development'
          }
        }, 'css-loader', 'postcss-loader']
      }
    ]
  },
  plugins: [
    new CssPlugin(),
    new HtmlPlugin({
      template: fromSrc('index.html')
    })
  ]
};

The place where the router is used looks like this

<script>
  import {Router, Route} from 'yrv';
  import ErrorPage from './_404.svelte';
  import Dashboard from '../components/dashboard.svelte';
  
  const routes = [
    {
      component: Dashboard,
      exact: true,
      path: '/'
    },
    {
      component: ErrorPage,
      fallback: true
    }
  ];
</script>

<!-- Creates an index route with an errorpage fallback -->
<Router>
  <Route
    component={Dashboard}
    exact={true},
    path="/"
  />
  <Route
    component={ErrorPage}
    fallback={true}
  />
</Router>

Using this code with multiple nested <Router>: https://svelte.dev/repl/8ae743aa80214ed696da8d13df392aa7?version=3.20.1

I have router.subscribe() called multiple times:

Using something like this:

<Router>
  <Route exact path="/lazy1" component={() => import('path/to/another-component1.svelte')} pending={Loading}/>
  <Route exact path="/lazy2" component={() => import('path/to/another-component2.svelte')} pending={Loading}/>
  <Route exact path="/lazy3" component={() => import('path/to/another-component3.svelte')} pending={Loading}/>
  <Route exact path="/lazy4" component={() => import('path/to/another-component4.svelte')} pending={Loading}/>
</Router>

I think we need something to avoid repetition of pending={Loading}.

Maybe a pending on <Router/> like this:

<Router pending={Loading}>

or better something like:

import { Router } from 'yrv';

Router.pending={Loading}

What do you think about?

Hello!

Liking the library. Tried svero and couldn't make good sense of things, swapped in yrv and everything started making sense.

However I am interested in having activeRouter be an exported prop so that I can bind to it from the outside. Let me know how you feel about that and if desired I can submit a PR. Thanks!

YRV Version: 0.0.30

Going to a project i haven't touched in awhile, starting the dev server up I now get this error.

Uncaught TypeError: Object(...) is not a function
    at eval (Router.svelte:280)
    at run (index.mjs:167)
    at Array.map (<anonymous>)
    at eval (index.mjs:1525)
    at flush (index.mjs:861)
    at init (index.mjs:1611)
    at new Main (main.svelte:133)
    at eval (main.js:8)
    at Module../src/main.js (dashboard.9635fb5645339333ce10.js:823)
    at __webpack_require__ (dashboard.9635fb5645339333ce10.js:64)

Which is caused by the following code

<script>
import {Router, Route} from "yrv";
</script>
<Router>
  <Route exact path="/" component={() => import('./routes/main.svelte')} />
</Router>

If I remove the Route component the error goes away, but obviously this is not optimal.

Seem we can't use nested route with default '/' path, do we have any plan or work around for this case?

Example: main router

<Router>
  <Route path="/" component="{Home}" />
  <Route path="/login" exact component="{Login}" />
</Router>

Then in Home component we also have a router

<Router>
  <Route exact component="{Dashboard}" />
  <Route path="/:id" exact component="{DetailItem}" />
</Router>

I tried many combination, including add/remove exact prop, but seem the router render is not working as I want, when use exact in path "/", the child router not rendering at all.
When clear exact, the /login will also render the Home component.

For now, I have to use /main or /home for the Home component instead of / that I actually need :(

I have tried to analyze the final weight impact in my application.

Compared to svelte-spa-router:

https://bundlephobia.com/[email protected]

Not just 10 KB.

Final bundle's size is different:

With svelte-spa-router:

Many src/*.svelte have a lot of stuff more with yrv.

And finally query-string about 3 KB.

25 KB more is huge!

Can I ask you why and if there is a way to "fix"?

What it really means Hash and URI-based routes in Readme.md?

I can use hash-based routes à la Gmail? e.g.: index.html#/profile, index.html#/book/42?

Is there any method that allows me to detect route change?
Or im doing things wrong? Im trying to make a fetch when my route changes.

Maybe a breaking change but I think we need this.

From Readme:

<Router>
  <Route exact>Hello World</Route>
  <Route exact path="/svelte-component" component={SvelteComponent}/>
  <Route exact path="/promise" component={import('path/to/other-component.svelte')}/>
  <Route exact path="/async" component={() => import('path/to/another-component.svelte')}/>
</Router>

Can we omit exact? Can we use it as default?

All my routes are exact.

Can we use not-exact or similar for when not exact?

Hi,
I'm using this routing library for a specific project that must run even on IE11.
Currently it works perfectly on MS Edge but on IE11 the address bar is correctly updated while the page is not changed.
It seems that the update on history and in location too it will cause some issue.

Currently I use a very very ugly workaround:

  const ua = window.navigator.userAgent
  const ie11 = ua.indexOf('rv:11.0') !== -1

  if (ie11) { // detect it's IE11
    window.addEventListener("hashchange", (event) => {
      window.location.reload();
    }, false);
  }

that reload the page everytime an hashchange event is triggered.

REPL: https://svelte.dev/repl/01a444e9c31045e5901ee9d51c32551a?version=3.20.1

I expect to see "This is Login" when I uncheck checkbox.

What is wrong with it?

Can we better clarify the difference between these two import modes?

<Route exact path="/promise" component={import('path/to/other-component.svelte')}/>
<Route exact path="/async" component={() => import('path/to/another-component.svelte')}/>

(!) Plugin svelte: Route has unused export property 'props'. If it is for external reference only, please consider using export const 'props'
node_modules/yrv/src/Route.svelte
27: export let key = null;
28: export let path = '/';
29: export let props = null;
^
30: export let exact = null;
31: export let disabled = false;

I think we need a CHANGELOG: https://github.com/conventional-changelog/conventional-changelog

Router is not working after deployment.

I have tried now.sh, surge.sh, netlify. Client side routing is not working after deployment.

Sample url: https://mybookshelf1.surge.sh/

On every Component in my Router i get this warning in browser's console.

was created with unknown prop 'router'

Can we do anything to remedy this?

In order to reduce <PageX> was created with unknown prop 'router' warning can we use something like svelte-spa-router?

https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Router.svelte#L207-L211.

What do you think about?

Hi i've been using this router to get to know Svelte, and so far all good.

But when i got to creating a route with an id parameter, refreshing the page on that route causes the app to look for the stylesheet in the wrong place.

instead of looking for index.css in localhost:4200/index.css like all other routes, this one for some reason attempt to look in a nested folder.

Thus if i navigate around, starting somewhere else, no problem. But if i refresh the page on http:localhost:4200/report/1234 it won't find the stylesheet.

Any ideas?

Index.html for reference

[!] (plugin babel) SyntaxError: /home/christos/Works/NewLunonaDev/Lunona-svelte/node_modules/yrv/src/Route.svelte: Unexpected reserved word 'arguments'

With svelte 3.18.2 everything works as expected

Hi!

I am trying to use this with Parcel. However, when starting a dev server Parcel grabs a minified version of the plugin as defined in pkg.browser. For some reason things break in the browser.

Uncaught TypeError: store.subscribe is not a function

When changing the pkg.browser entry to src/index.js everything works as expected. The pkg.svelte already points to it, but this is a reserved property for the svelte compiler options and should not be used as an entry point, right?

I am a little unsure on how to proceed here. On what side the error is. Isn't it a bundler's job to minify the assets? What's your opinion?

I have a Route with a condition, showNavBar, which shows a Nav component.

<Route condition={ showNavBar } component={Nav} />

showNavBar is set to false (shown from console.log()) but the Nav still launches!

Thanks for making yrv!

<script>

  import { Router, Route } from 'yrv';

  import Nav from './nav.svelte'
  import RecordEvents from './record-events.svelte'
  import ChatWidget from './chat-widget.svelte'
  import FrontPage from './front-page.svelte'
  import LoginPage from './login-page.svelte'
  import LaunchPage from './launch-page.svelte'
  import About from './about.svelte'
  import Pricing from './pricing.svelte'
  import Forgot from './forgot.svelte'
  import ForgotSent from './forgot-sent.svelte'
  import PrivacyPolicy from './privacy-policy.svelte'
  import Blog from './blog.svelte'
  import SignupPage from './signup-page.svelte'
  import ResetPasswordPage from './reset-password.svelte'
  import ErrorPage from './error-page.svelte'
  import Footer from './footer.svelte'

  let title = window.serverVars.title
  document.title = title

  var showNavBar = (! ['/login', 'signup'].includes(window.location.pathname))

  log({showNavBar})
</script>

<Router>  
  <Route condition={ showNavBar } component={Nav} />

  <Route exact path="" component={FrontPage} />
  <Route path="/about" component={About} />
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={LoginPage} />
  <Route path="/launch" component={LaunchPage} />
  <Route path="/signup" component={SignupPage} />
  <Route path="/blog" component={Blog} />
  <Route path="/forgot" component={Forgot} />
  <Route path="/privacyPolicy" component={PrivacyPolicy} />
  <Route path="/forgotSent" component={ForgotSent} />
  <Route path="/resetPassword" component={ResetPasswordPage} />
  <Route fallback component={ErrorPage} error={window.serverVars.error}/>
</Router>

(More things here, cut for brevity)

I'm relatively new to Svelte v3 (though I've used v2 some time ago) and I'm currently porting an educational app for my students from React to Svelte.

With all the routers I've tried (yours is the 3rd) I've had different issues :)

Not sure if the problem is specifically with the router or Svelte in general, but currently I'm getting 'target' is a required option
The simplistic repro app: https://codesandbox.io/s/svelte-yrv-issue-zvelg
I've created it by cleaning up my real app so it is possible I've overlooked something but it's so small I think it's actually OK.

Hey! Thanks for the package, it was a delight to use it due to it's simplicity.

However, I've run into a few problems here, it's not exactly show-stopping, but maybe it's something that may require some attention from you.

First thing is typescript support, I wonder if there is typescript support for yrv? Running yarn validate will give hints/errors that there are no type definitions for yrv, and I tried doing yarn add --dev @types/yrv too, but it seems that it does not exists.

Another thing are warnings on build, it seems like after a recent update, yrv is doing something that may have unintended consequences, I wonder if this is also something that may need your attention? This can be triggered with yarn build or yarn dev.

Please do let me know if there is anything else you need from me, thanks!

I have this setup:

App.svelte:

<main>
    <Navbar />
    <div class="master-container {extraClassesString}">
        <Router>
            <Route exact path="/" component={IndexPage} />
            <Route path="/blog" component={BlogListPage} />
            <Route fallback component={NotFoundPage} />
        </Router>
    </div>
</main>

BlogListPage.svelte

    ... some common header stuff
    <Router path="/blog">
        <Route exact path="/:year/:id" let:router>{router.params.year} {router.params.id}</Route>
    </Router>

Can you provide an example of how to make this routing configuration work?

I'm writing a book about development with Svelte. I like the work you've done, so I'd like to recommend yrv as the router for people who want to use one based on the HTML5 history API.

However, the tagline for the project ("Your routing bro!") makes me feel uncomfortable and stops me short of doing that. This is present on GitHub at the top of the page, as well as in multiple parts in the code: https://github.com/pateketrueke/yrv/search?q=bro&unscoped_q=bro

Would you please consider changing the tagline to something more inclusive? The "bro" term is connected to a toxic culture in tech (you might have heard the term "brogrammers") that is hurting women and non-binary individuals.

Your code is really good, there's no reason why "non-bros" can't use it 😉

Great library, glad to have it!

Quick question though -- I come from a largely Vue background and I was wondering if there was any way implement Vue's dynamic import? e.g.

<script>
import {Router, Route} from 'yrv';
</script>

<Router>
  <Route component={() => import('./pages/SomePage.svelte')} path="/some-page" />
  <Route fallback>
    Whoops!
  </Route>
</Router>

I figured I'd ask here and see if it is a feature you can implement yourself (I've not looked at the source) or if it should be asked further up the pipeline.

Thanks!

Hi,
thank you for fixed the latest issues relating to babel and IE11 !!!
I have only an issue, using your library.
I'm using directly the Linkcomponent with only a href parameter. If I have a link at the bottom of a page/component, when I load the new route the scrollbar remains on bottom instead of positioning on top.
Probably I'm missing something but there is a possibility to scroll on top after a route update, without reloading a page completely?

Thanks in advance !

YRV Version: 0.0.27
Svelte: 3.20.1

Okay, so let's get ready for a fairly long ticket -- trying to be as thorough as possible to make sure I'm documenting what I am seeing.

Description

According to the readme, the following should work by dynamically importing the '404.svelte' file:

<script>
import {Router, Route} from 'yrv';
import Dashboard from './dashboard.svelte';
</script>
<Router>
  <Route component={Dashboard} path="/" exact />
  <Route component={() => import('./_404.svelte')} fallback pending="Loading..." />
</Router>

However, all I am seeing on the page is 'Loading...'

Switching this to something a little bit more wordy, such as

<script>
// same stuff
</script>

<Router>
  <Route component={Dashboard} path="/" exact/>
  <Route component={() => {
    console.log('Testing');
    return import('./_404.svelte');
  }} fallback pending="Whoops"/>
</Router>

never shows 'Testing' in the console -- this function is never called. BUT if we re-arrange that to

<script>
// same imports
  function loadMe(){
    console.log('Load Me!')
    return import('./_404.svelte').then(res=>{
      console.log(res);
      return res;
    });
  }
</script>

<!-- Creates an index route with an errorpage fallback -->
<Router>
  <Route component={Dashboard} path="/" exact/>
  <Route component={loadMe} fallback pending="Whoops"/>
</Router>

I now see "Load Me!" in the console, but I receive this error:

Route.svelte:224 Uncaught (in promise) TypeError: Cannot read property 'fragment' of undefined
    at Object.create [as c] (Route.svelte:224)
    at Object.create [as c] (Route.svelte:90)
    at Object.update [as p] (Route.svelte:607)
    at update (index.mjs:834)
    at flush (index.mjs:803)

In fiddling around I thought maybe the arrow function binding messed something up and the end function needed to be bound differently, so I changed the given <Route> to read:

<Route component={loadMe.bind(this)} fallback pending="Whoops" />

Which removes the error, but no longer shows 'Load me!' to indicate the function has been invoked.

Out of sheer morbid curiosity I decided to change the function declaration for loadMe to the following:

<script>
// same includes
const loadMe = () => {
  console.log('Load Me!');
  return import('./_404.svelte');
}
</script>
<Route component={loadMe} fallback pending="Whoops" />

Which likewise no longer shows 'load me!'

Other Information

Does import('./_404.svelte') work?
Yes -- if I add a .then(res => { console.log(res); return res; }) to it and just have it load passively in the component it works just fine.

REPL: https://svelte.dev/repl/452d344c72a048818a31aa1af48722af?version=3.20.1

I think we have a new issue or a new FAQ for nested routers.

I'm calling from a nested router a route with two slashes:

/ --> /players --> /team/new: NOTHING appears!

"abstract-nested-router" docs say (of params):
"By default all segments are optional, e.g. /a/:b/:c matches with /a, /a/x and /a/x/y so you can say :b and :c are optional parameters."

For "yrv" it is not so. If i need a page with optional params, i have to declare three routes, one for each case:

<Route path="/page/:x/:y">Page</Route>
<Route path="/page/:x">Page</Route>
<Route path="/page">Page</Route>

I need the same component with params based on current path.

Could it be made as in "abstract-nested-router"?

Started from here: #47

Heya. Here's a subtle issue with the route for /, the top level of my site:

Using yrv 0.0.12, the following will break

<Router>
  <Route exact path="" component={FrontPage} />
  <Route path="/about" component={About} />
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={LoginPage} />
  ...

I can fix it with (note the path on the first line):

<Router>
  <Route exact path="/" component={FrontPage} />
  <Route path="/about" component={About} />
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={LoginPage} />
  ...

Note while this works, it's a bit inconsistent - /about has no trailing slash.,/pricing has no trailing slash, why does `` need a trailing slash?

Ideally / should be normalised and the trailing / not needed.

I made an example to show this issue. I don't know if it's a bug or I did something incorrectly.

https://svelte.dev/repl/cbce750dd5f3407eb06c9e7a28fec815?version=3.6.8

Seems that <Route path="/a" /> doesn't match "/a/b/c".

For example we have route like:

<Route exact path="/auth" component={Auth}/>

Using SPA navigation without any troubles. But when run app on production, some servers may redirect URL like http://mydomain/auth to http://mydomain/auth/ - with trailing slash. In this case router won't show the needed page. Usually, it is configurable on the server side - but maybe it is better to add support for both URL in the router?

Hi,

First of all let me thank you for creating this wonderful router. I was able to make it work for me from the example without any extra effort.

But i found it really hard to find a proper router for svelte. It would be great if we can change the name of the router to something very easy to find.

Just a proposal, svelte-router-dom or anything than makes this library easy found in npm search!.

<script>
export let path = '/'
</script>

<Link href={path}><fancy stuff /></Link>

When I try to create a dynamic link like this, the corresponding <a> tags href attribute does not reflect the change of the path variable. It does, however, lead to wherever path points to when clicked.

So when I change the path from / to /about, the href is still /, but when I click on the link, it leads me to /about.