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() })