Flow-Router Extra Docs Index

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:
Workarounds:
Manipulation:
URLs and data:
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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!