https://github.com/jacwright/svelte-navaid

A Svelte router powered by https://github.com/lukeed/navaid/
https://github.com/jacwright/svelte-navaid

Last synced: about 1 month ago
JSON representation

A Svelte router powered by https://github.com/lukeed/navaid/

• Host: GitHub
• URL: https://github.com/jacwright/svelte-navaid
• Owner: jacwright
• License: mit
• Created: 2019-08-26T14:20:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-17T22:40:39.000Z (about 4 years ago)
• Last Synced: 2024-04-15T02:42:43.721Z (2 months ago)
• Language: HTML
• Size: 15.6 KB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-svelte-resources - `svelte-navaid` - (components and libraries / routers)

README

        
# svelte-navaid

Navaid-based routing components for Svelte. Does not work with Sapper. Yet. I don’t think. Contributions welcome.

## Getting Started

```bash

npm i --save svelte-navaid

```

```svelte

  import Router from 'svelte-navaid/Router.svelte';

  import Route from 'svelte-navaid/Route.svelte';

  import Link from 'svelte-navaid/Link.svelte';

  import SomeComponent from './SomeComponent.svelte';

  
Hello World!


  Home | Foo | Bar

  

    
Home

  


  

  

    
Foo


    

    

      

      Sub 1 | Sub 2

      

        
Sub Foo 1

      


      

        
Sub Foo 2

      


    

  

  

  

  

  

    The ID is: {params.id}

  

  

  

    
Page Not Found

  


```

Use hash-based routing for single-page apps that are hosted on a server which doesn't support it.

```svelte

  import Router from 'svelte-navaid/Router.svelte';

  import Route from 'svelte-navaid/Route.svelte';

  import Link from 'svelte-navaid/Link.svelte';

  import navaidHash from 'svelte-navaid/navaid-hash';

  
Hello World!


  

  Home | Foo | Bar

  

    
Home

  


  

    
Foo


    

    

      

      Sub 1 | Sub 2

      

        
Sub Foo 1

      


      

        
Sub Foo 2

      


    

  

  

    
bar

  


```

Navigate to paths programmatically. The first 2 options are recommended because they will use the context of the router.

This allows using the path relative to the nearest router vs the whole application. Be sure to start the URL with `/` to

get the intended result.

```svelte

  import Router from 'svelte-navaid/Router.svelte';

  import Route from 'svelte-navaid/Route.svelte';

  let navigate;

  
Hello World!


  

     navigate('/bar')}>Go To Bar

  

  

     navigate('/')}>Go Home

  

```

```svelte

  import { getContext } from 'svelte';

  const navigate = getContext('navigate');

 navigate('/bar')}>Go To Bar

```

When using the following method, you must use the full path, even if within nested routes (e.g. "/blog/articles/23"). It

does not know the base URL. If using the hash library this method will also require you use the hash (e.g. "#/blog/articles/23").

If you write your components using one of the previous two methods, they will be more portable and maintainable.

```svelte

  import { navigate } from 'svelte-navaid';

 navigate('/bar')}>Go To Bar

```

## Testing

```bash

npm run dev

```

This will start a server where you can view a simple demo app which shows off the router and its features.