npm i franxx historyimport { 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:
- Static (
/foo,/foo/bar) - Parameter (
/:title,/books/:title,/books/:genre/:title) - Parameter w/ Suffix (
/movies/:title.mp4,/movies/:title.(mp4|mov)) - Optional Parameters (
/:title?,/books/:title?,/books/:genre/:title?) - Wildcards (
*,/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>- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
franxx © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
github.com/egoist · GitHub @egoist · Twitter @_egoistlily