Home

Client routing for Meteor.js apps

meteor add ostrio:flow-router-extra

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

// DISABLE QUERY STRING COMPATIBILITY
// WITH OLDER FlowRouter AND Meteor RELEASES
FlowRouter.decodeQueryParamsOnce = true;

FlowRouter.route('/', {
  name: 'index',
  action() {
    // Render a template using Blaze
    this.render('templateName');

    // Can be used with BlazeLayout,
    // and ReactLayout for React-based apps
  }
});

// Create 404 route (catch-all)
FlowRouter.route('*', {
  action() {
    // Show 404 error page using Blaze
    this.render('notFound');

    // Can be used with BlazeLayout,
    // and ReactLayout for React-based apps
  }
});

Important

For the new apps it is recommended to set decodeQueryParamsOnce to true. This flag is here to fix #78. By default it is false due to its historical origin for compatibility purposes

General tutorials:

• Quick Start
• Templating
• Templating with "Regions"
• Templating with Data
• Auto-scroll
• React.js usage
• Usage in real application

Hooks (in execution order):

• .whileWaiting() hook
• .waitOn() hook
• .waitOnResources() hook
• .endWaiting() hook
• .data() hook
• .onNoData() hook
• .triggersEnter() hooks
• .action() hook
• .triggersExit() hooks

Helpers:

• isActiveRoute template helper
• isActivePath template helper
• isNotActiveRoute template helper
• isNotActivePath template helper
• pathFor template helper
• urlFor template helper
• param template helper
• queryParam template helper
• currentRouteName template helper
• currentRouteOption template helper
• isActiveRoute template helper
• RouterHelpers class
• templatehelpers package

API:

• General Methods:
  • .go() method
  • .route() method
  • .group() method
  • .render() method
  • Global .triggers
• Workarounds:
  • .refresh() method
  • .reload() method
  • .pathRegExp option
  • .decodeQueryParamsOnce option
• Manipulation:
  • .getParam() method
  • .getQueryParam() method
  • .setParams() method
  • .setQueryParams() method
• URLs and data:
  • .url() method
  • .path() method
  • .current() method
  • .getRouteName() method
• Reactivity:
  • .watchPathChange() method
  • .withReplaceState() method
• For add-on developers:
  • .onRouteRegister() method
• Tweaking:
  • .wait() method
  • .initialize() method

Related packages:

• ostrio:flow-router-title - Reactive page title (document.title)
• ostrio:flow-router-meta - Per route meta tags, script and link (CSS), set per-route stylesheets and scripts
• communitypackages:fast-render - Fast Render can improve the initial load time of your app, giving you 2-10 times faster initial page loads. fast-render integration tutorial
• communitypackages:inject-data - This is the package used by fast-render to push data to the client with the initial HTML
• flean:flow-router-autoscroll - Autoscroll for Flow Router
• mealsunite:flow-routing-extra - Add-on for User Accounts
• nxcong:flow-routing - Add-on for User Accounts (alternative)
• forwarder:autoform-wizard-flow-router-extra - Flow Router bindings for AutoForm Wizard
• nicolaslopezj:router-layer - Helps package authors to support multiple routers
• krishaamer:flow-router-breadcrumb - Easy way to add a breadcrumb with enough flexibility to your project (flow-router-extra edition)
• krishaamer:body-class - Easily scope CSS by automatically adding the current template and layout names as classes on the body element

Support this project:

• Upload and share files using ☄️ meteor-files.com — Continue interrupted file uploads without losing any progress. There is nothing that will stop Meteor from delivering your file to the desired destination
• Use ▲ ostr.io for Server Monitoring, Web Analytics, WebSec, Web-CRON and SEO Pre-rendering of a website
• Star on GitHub
• Star on Atmosphere
• Sponsor via GitHub
• Support via PayPal