A vanilla JavaScript router that works everywhere.
MIT License
npm i franxx history
import { createRouter } from 'franxx'
import { createBrowserHistory } from 'history'
const router = createRouter({
history: createBrowserHistory(),
})
router.add('/', () => {
console.log('homepage')
})
router.add('/user/:name', ({ params, query }) => {
console.log(params.name)
})
// The router by default automatically runs route handler
// When URL changes
// But for initial render
// You need to call this:
router.run()
// Go to another page
router.push('/user/egoist?from=NASA#profile')
// Or let us normalize the path for you
router.push({
pathname: '/user/egoist',
query: { from: 'NASA' },
hash: '#profile',
})
Supported path patterns:
/foo
, /foo/bar
)/:title
, /books/:title
, /books/:genre/:title
)/movies/:title.mp4
, /movies/:title.(mp4|mov)
)/:title?
, /books/:title?
, /books/:genre/:title?
)*
, /books/*
, /books/:genre/*
)Note that the order you add routes matters, dynamic routes should always go last, i.e. add /about
before adding *
. We will address this issue in a future version.
Load it as an ES module from CDN:
<script type="module">
import { createRouter } from 'https://cdn.jsdelivr.net/npm/franxx/dist/index.mjs'
</script>
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
franxx © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).
github.com/egoist · GitHub @egoist · Twitter @_egoistlily