SILKROUTER

Welcome!

      npm i silkrouter rxjs
      

      const router = new Router();
      

      router.subscribe((e) => {
          console.log(e.route); // --> '/' (Current active route)
      });
      

      router.set('/');
      

      const router = new Router({
          init: false, // Initialize on page load. Default: true
          hashRouting: true, // Switch to hash routing. Default: false
          preservePath: false, // If 'true' it will preserve current URL path. Works only for hash routing. Default: false
      });
      

Hash routing

Click on one of the tabs below and observe how application reacts to route changes.

Click on the radio button below to enable hash routing.

Implementation

Hash routing implementation is straight forward.

    // Create a new instance with hashRouting enabled
    const hashRouter = new Router({
        hashRouting: true
    });
    

Pass data

Route listener can accepts data via

1. Query string
2. Route parameters
3. History state object

This information is persisted in router event object. To demonstrate how this works, click on the button below:

This will activate a route "/tab3/:firstname/:lastname". Your data will appear below:

Awesome! Now click the button below to append query string to the current URL.

Excellent! Now click the button below to set current URL state.

Implementation

To activate a route that accepts route parameters, silkrouter ships a special operator called route.

    ...
    import { resolveParams } from 'silkrouter';
    ...
    router.subscribe(e => {
      const params = resolveParams('/tab3/:firstname/:lastname', e.route);
      console.log(params);
    });
    

Query strings on the other hand are passed to all listeners by default (if they exist). You can access them via event.search and event.hashSearch properties. You can also pass query strings as data, and router will take care of the rest.

    router.set('/tab3/john/doe', {
        queryString: 'q=helloworld'
    });
    

Similarly you can also pass data explicitly which is persisted in history.state object.

    router.set('/tab3/john/doe', {
        queryString: 'q=helloworld',
        data: 'Hello World'
    });
    

You can access this data using event.data property.