Getting started #

The easiest way to try out FicusJS router is using a simple example.

Create an index.html file and copy the following between the <body> tags.

<top-nav></top-nav>
<div id="router-outlet"></div>

<script type="module">
import { createRouter } from 'https://cdn.skypack.dev/@ficusjs/router@3'
import { createComponent } from 'https://cdn.skypack.dev/ficusjs@3'
import { renderer, html } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/lit-html'

createComponent('home-page', {
renderer,
render () {
return html`<div>Welcome to the home page!</div>`
}
})

createComponent('page-one', {
renderer,
render () {
return html`<div>Welcome to the page one!</div>`
}
})

createComponent('page-two', {
renderer,
render () {
return html`<div>Welcome to the page two!</div>`
}
})

const router = createRouter([
{ path: '', component: 'home-page' },
{ path: '/one', component: 'page-one' },
{ path: '/two', component: 'page-two' }
], '#router-outlet', { mode: 'hash' })

createComponent('top-nav', {
renderer,
navigateTo (path) {
router.push(path)
},
render () {
return html`
<nav>
<ul>
<li><button type="button" @click="
${() => this.navigateTo('/')}">Home</button></li>
<li><button type="button" @click="
${() => this.navigateTo('/one')}">Page one</button></li>
<li><button type="button" @click="
${() => this.navigateTo('/two')}">Page two</button></li>
</ul>
</nav>
`

}
})
</script>

Alternatively, fork this Codepen to see it in action - https://codepen.io/ducksoupdev/pen/PoNvGwK

The example creates a set of page components, a page navigation component and a new router using hash mode.