🚨 Disclaimer: Routify 3 is currently in Release Candidate stage.

Please be aware that while the documentation is comprehensive, it may contain inaccuracies or errors. The codebase is also subject to changes that could affect functionality. We appreciate your understanding and welcome any feedback or contributions.

Sometimes the filepaths in your project don’t match the routes on your server.

Maybe you’re doing internationalization or you’re hosting your site on a sub-path.

To solve this, we can use URL rewrites.

For example, if we’re hosting a site on a basepath like /my-app, we could use the following URL rewrite.

<script context="module">
    import { Router, createRouter } from '@roxi/routify'
    import routes from '../.routify/routes.default.js'

    const router = createRouter({
        routes,
        urlRewrite: {
           toExternal: url => '/my-app' + url,
           toInternal: url => url.replace(/^\/my-app/, ''),
       }
    })
</script>

<Router {router} />

For advanced projects you could even chain multiple URL rewrites

import { basepath, localization } from './my-url-rewrites'

const urlRewrite = [ basepath('my-app'), localization('fr') ]

🚨 Disclaimer: Routify 3 is currently in Release Candidate stage.

guide

Concepts

Url Rewrites