<p align=center>
  <img width=300 height=auto src="../../../public/bio_logo_transparent2.png"/>
</p>

# Bio: router component structure
## 0.0.0.2021
### 5.1
```ts
// ./Router.bio
import component { Counter } from './Counter.bio';
import component { Route404 } from './404.bio';

export router <Router>

  <template>
    <Counter
      path=/count
      title="Basic Counter" />
    <Route404 path=* />
  </template>
</Router>

// ./App.bio
import component { Router } from './Router.bio';

export app <App>
  <template>
    <Router />
  </template>
</App>
```

### 5.1
```ts
import component { Counter } from './Counter.bio';
import component { Route404 } from './404.bio';

export router <Router
    @void doDefaultThings={() => {...}}
    @void doThingsBeforeEnter={() => {...}}
    @void doThings={() => {...}}>

    <template>
      <Counter
        path=/count
        name=counter
        title="Basic Counter" />
      <Route404 path=* />
    </template>
    <script>
      case 'beforeEnter:counter': this.doThingsBeforeEnter(); break;
      case 'load:counter': this.doThings(); break;
      default: this.doDefaultThings();
    </script>
</Router>
```