How to use navigo - 8 common examples

/* global process */

import { LightningElement, createElement, track } from 'lwc';
import Navigo from 'navigo';

export default class App extends LightningElement {
    releaseVersion = process.env.RELEASE_VERSION;
    releaseDate = process.env.RELEASE_DATE;

    router = new Navigo(location.origin, false);

    menuItems = [
        {
            title: 'Podcast',
            location: '/podcasts',
            iconName: 'grid',
        },
        {
            title: 'Discover',
            location: '/discover',
            iconName: 'search',
        },
    ];

    @track playerExpanded = false;

mounted() {
    const router = new Router('', true)
    router.on('/:visibility', ({ visibility }) => {
      this.visibility = visibility
    }).resolve()
  },
  methods: {

import 'simple-line-icons/scss/simple-line-icons.scss';
import './layout.scss';
import $ from 'jquery';
import Navigo from 'navigo';
import API from './api';
import Locale from './locale';
import Auth from './auth';
import User from './user';
import Packet from './packet';
import Message from './message';

const PartialLoading = require('./loading.html');
const Error404 = require('./404.html');
const router = new Navigo(WEB_ROOT, true);
const api = new API(router, API_ROOT);

window.i18n = new Locale(navigator.language);

router.replace = function(url) {
  this.resolve(url);
  this.pause(true);
  this.navigate(url);
  this.pause(false);
};

router.hooks({
  before: function(done, params) {
    $('body').attr('class', 'loading layout');
    $('#layout-container').html(PartialLoading());
    $('title').html(APP_NAME);

initRouter() {
    this.router = new Navigo(ROOT_URL, false);
    this.router.updatePageLinks();


    this.router.on({
      '/': () => {
        this.renderPage('home');
      },
      '/profile': () => {
        this.renderPage('profile');
      },
      '/video/:id': (params) => {
        this.renderPage('video', params.id);
      },
      '/search/:query': (params) => {
        this.renderPage('search', params.query);
      }

constructor() {
    super();
    this.router = new Navigo("/", true, "#!");
    this.route = null;
    this.router
      .on({
        "most-active": () => {
          this.route = html`
            
          `;
        },
        "most-active/all": () => {
          this.route = html`
            
          `;
        },
        "most-active/quarter": () => {
          this.route = html`

useEffect(() => {
    router = new Navigo(null, true);

    router.on('/', () => setSandboxKey('/'));

    sandboxesItems.forEach(item => {
      router.on(item.key, () => setSandboxKey(item.key)).resolve();
    });
  }, []);