Navigo.js works as replacement router for Riot.route in Riot4.js
The "Riot route" router of the Riot project, does not work with Riot.js 4 at the time of this writing. It had to be switched out and I settled for Navigo.js.I have not used it extensively , but here are the changes I had to make, including explicitly unmounting components and respecting that riot.compile is now asynchronous and separate. The code below is for the on-the-fly compiling:
Before with Riot3.js and Riot.route
<!-- Load riot live compiler for on-the-fly compiling, it compiles automatically -->
<script src="http://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.min.js"></script>
<!-- Load riot's router -->
<script src="https://cdn.jsdelivr.net/npm/riot-route@3.1.4/dist/route.js"></script>
route('login', function (name) {
riot.mount('div#mainview', 'login')
})
route('profile', function (name) {
riot.mount('div#mainview', 'profile')
})
route('mytasks', function (name) {
riot.mount('div#mainview', 'mytasks')
})
route.start(true)
route('login')
And now with Riot4.js and Navigo
<!-- Load riot live compiler for on-the-fly compiling, it does not compile automatically -->
<script src="https://cdn.jsdelivr.net/npm/riot@4/riot+compiler.min.js"></script>
<!-- Load the navigo router -->
<script src="https://cdn.jsdelivr.net/npm/navigo@7.1.2/lib/navigo.min.js"
integrity="sha256-EfgFBwdiJuG/NJPYFztHuhSHB1BP4y2yS83oTm6iP04=" crossorigin="anonymous"></script>
<!-- Configure the router and load initial route -->
<script>
const router = new Navigo(null, true);
riot.compile().then(() => {
riot.mount('#mainview', {}, 'login')
}).then(() => {
router
.on({
'login': function () {
riot.unmount('#mainview', true)
riot.mount('#mainview', {}, 'login')
},
'profile': function () {
riot.unmount('#mainview', true)
riot.mount('#mainview', {}, 'profile')
},
'mytasks': function () {
riot.unmount('#mainview', true)
riot.mount('#mainview', {}, 'mytasks')
}
})
.resolve()
router.notFound(function (params) {
riot.mount('#mainview', {}, 'login')
}).resolve()
})