Navigo.js works as replacement router for Riot.route in Riot4.js

published Oct 16, 2019 05:50   by admin ( last modified Oct 16, 2019 08:40 )

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