FlowRouter Extra

Flow Router provides a sequence of hooks that execute during the routing lifecycle. Understanding the execution order is critical for managing route guards, data loading, and side effects. The hooks execute in the following order:

1. .guard(): Used for permission and access control.
2. .whileWaiting(): Executes while the router is waiting for data or resources.
3. .waitOn(): Defines specific data or resources to wait for.
4. .waitOnResources(): Defines specific resources to wait for.
5. .endWaiting(): Executes once the waiting period is over.
6. .data(): Provides data to the route.
7. .onNoData(): Handles cases where no data is available.
8. .triggersEnter(): Executes logic when entering the route.
9. .action(): The primary logic/rendering hook for the route.
10. .triggersExit(): Executes logic when leaving the route.

When using .go() to navigate to a different hash (fragment) within the same path and query parameters, FlowRouter does not re-run the route logic. Instead, it allows the browser to handle the navigation as a standard anchor change.

To respond to these changes (e.g., for tab switching or scrolling to a specific element), you should listen to the browser's hashchange event.

// Example: Scrolling to an element when the hash changes
window.addEventListener('hashchange', () => {
  const tab = window.location.hash.slice(1);
  if (tab) {
    document.getElementById(tab)?.scrollIntoView();
  }
});

// Triggering a hash change via FlowRouter
FlowRouter.go('/profile#security');

When using Blaze templates with ostrio:flow-router-extra, you can define templates using .html files and manage their lifecycle using standard Meteor Template callbacks.

Common callbacks available for any template (including layouts) include:

• onCreated()
• onRendered()
• onDestroyed()
• helpers()
• events()

import { Template } from 'meteor/templating';
import './layout.html';

Template.layout.onCreated(function () { /* ... */ });
Template.layout.onRendered(function () { /* ... */ });
Template.layout.onDestroyed(function () { /* ... */ });
Template.layout.helpers({ /* ... */ });
Template.layout.events({ /* ... */ });

When you define a guard on a FlowRouter.group, that guard is inherited by all nested groups and routes within it.

Execution Order: Guards execute from the parent group down to the child groups, and finally to the specific route guard.

const authenticated = FlowRouter.group({
  guard(context, redirect) {
    if (!Meteor.userId()) {
      redirect('/sign-in');
    }
  }
});

authenticated.route('/settings', {
  action() {}
});

Triggers allow you to execute logic before entering a route (triggersEnter) or after exiting a route (triggersExit).

Route-level Triggers

Define triggersEnter and triggersExit arrays in the route options.

Group-level Triggers

Define triggers in the FlowRouter.group() configuration to apply them to all routes in that group.

Global Triggers

Register triggers globally using FlowRouter.triggers.enter() and FlowRouter.triggers.exit(). You can filter global triggers using only or except keys (but not both simultaneously).

// Route-level
FlowRouter.route('/home', {
  triggersEnter: [trackRouteEntry],
  action: function () {},
  triggersExit: [trackRouteClose]
});

// Global with filtering
FlowRouter.triggers.enter([trackRouteEntry], {only: ["home"]});
FlowRouter.triggers.exit([trackRouteExit], {except: ["home"]});

FlowRouter is a client-side router and does not support server-side routing. While subscriptions run on the server to support Fast Render, the routing logic itself is client-centric.

For server-side routing (handling headers, cookies, and HTTP methods like GET or POST), it is recommended to use a dedicated server-side router such as meteorhacks:picker.

You can nest groups within other groups to create hierarchical routing structures. A nested group inherits the prefix and properties of its parent group and appends its own prefix to it.

For example, a group with prefix /admin containing a nested group with prefix /super will result in routes starting with /admin/super.

const adminRoutes = FlowRouter.group({
    prefix: '/admin',
    name: 'admin'
});

const superAdminRoutes = adminRoutes.group({
    prefix: '/super',
    name: 'superadmin'
});

// handling /admin/super/post
superAdminRoutes.route('/post', {
    action() { /* ... */ }
});

FlowRouter Extra provides several hooks that execute in a specific sequence during the routing lifecycle. Understanding this order is critical for managing data loading and transitions:

1. .whileWaiting()
2. .waitOn()
3. .waitOnResources()
4. .endWaiting()
5. .data()
6. .onNoData()
7. .triggersEnter()
8. .action()
9. .triggersExit()