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

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

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
• linkTo 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:

This project wouldn't be possible without ostr.io.

Using ostr.io you are not only protecting domain names, monitoring websites and servers, using Prerendering for better SEO of your JavaScript website, but support our Open Source activity, and great packages like this one could be available for free.