# Router

The router observes the document.location changes and updates its view as follows

## Data-route / Basic

When the data-route attribute of a template matches the current url, the content of this template is rendered

<sonic-code>
  <template>
    <div class="flex gap-2 items-center">
      <sonic-button href="#core/components/functional/router/router.md/router#home" size="xs">Home</sonic-button>
      <sonic-button href="#core/components/functional/router/router.md/router#about" size="xs">About</sonic-button>
      <sonic-button href="#core/components/functional/router/router.md/router#work" size="xs">Work</sonic-button>
      <sonic-button href="#core/components/functional/router/router.md/router#contact" size="xs">Contact</sonic-button>
    </div>
    <sonic-router>
      <template data-route="#home">
        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Home</div>
      </template>
      <template data-route="#about">
        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">About</div>
      </template>
      <template data-route="#work">
        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Work</div>
      </template>
      <template data-route="#contact">
        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Contact</div>
      </template>
    </sonic-router>
  </template>
</sonic-code>

## Data-route / Regexp

You can use any RegExp in the data-route attribute of your templates to match the current location and to extract variables from it using capturing groups.
A dataProvider attribute is generated using the dataProviderExpression where $1, $2... are replaced with this variables.

**e.g.**, data-route="#couleur_<b class="text-danger">(\d+)</b>" => dataProviderExpression="api/unknown/<b class="text-danger">$1</b>"

The rendered content of the matching template is scoped with this  **dataProvider**.
You can make creative usage on this feature to generate dynamic content based on services.

<sonic-code>
  <template>
    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
      <template>
        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
          <span data-bind ::inner-html="ucFirst|$name"></span>
        </sonic-button>
      </template>
    </sonic-list>
    <sonic-router>
      <template data-route="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
        <sonic-fetch>
          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
        </sonic-fetch>
      </template>
    </sonic-router>
  </template>
</sonic-code>

## Data-route / Url-pattern

Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a>  
**e.g.**, data-route="#couleur_<b class="text-danger">:id</b>" => dataProviderExpression="api/unknown/<b class="text-danger">:id</b>"

<sonic-code>
  <template>
    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
      <template>
        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
          <span data-bind ::inner-html="ucFirst|$name"></span>
        </sonic-button>
      </template>
    </sonic-list>
    <sonic-router>
      <template data-route="/*#couleur_:id" dataProviderExpression="api/unknown/:id">
        <sonic-fetch>
          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
        </sonic-fetch>
      </template>
    </sonic-router>
  </template>
</sonic-code>

## Redirect

Redirect allows to redirect to a url when a data is provided.
Here Redirect waits that a data is available in the property *theData* of the dataProvider *stupid-data-set-id*
We are then redirected to the url *#data-is-set* which does nothing in itself.

<sonic-code>
  <template>
    <sonic-redirect to="#core/components/functional/router/router.md/router#data-is-set" dataProvider="stupid-data-set-id" onData="theData"></sonic-redirect>
    <div class="flex gap-2 mb-4" formDataProvider="stupid-data-set-id">
      <sonic-button radio name="theData" value="Some Data" size="xs">
        Enter data
      </sonic-button>
      <sonic-button radio name="theData" value="" href="javascript:history.back();" size="xs">
        Delete the data and do a history.back()
      </sonic-button>
    </div>
    
  </template>
</sonic-code>

Example of use : use with a router and a submit to manage the steps of login/logout, display of user info.

## Fallback

The fallback route is rendered when no other route matches the current location.

<sonic-code>
  <sonic-router>
    <template data-route="#home">
      <div>Home</div>
    </template>
    <template data-route="#fallback">
      <div>Fallback</div>
    </template>
  </sonic-router>
</sonic-code>

## Programmatic routes