FlowRouter Extra

Carefully extended flow-router package. FlowRouter is a very simple router for Meteor.js. It does routing for client-side apps and compatible with React, Vue, Svelte, and Blaze.

It exposes a great API for changing the URL and getting data from the URL. However, inside the router, it's not reactive. Most importantly, FlowRouter is designed with performance in mind and it focuses on what it does best: routing.

Features:

📦 Not dependent on Blaze, ready for React.js and other templating/components engines/libs;
📦 No underscore package dependency;
👨‍💻 TypeScript definition types.d.ts
👨‍🔬 Great tests coverage;
🥑 Up-to-date dependencies;
📦 Support of Fast Render and other great packages;
📋 Following semver with regular releases;
📋 Great wiki;
📋 Great quick start tutorial.

Install

meteor add ostrio:flow-router-extra

ES6 Import

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
// Full list of available classes and instances:
// { FlowRouter, Router, Route, Group, Triggers, BlazeRenderer, RouterHelpers }

Usage

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

Documentation

Continue with our wiki;
Quick start tutorial;
All docs as single document.

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

Running Tests

Clone this package
In Terminal (Console) go to directory where package is cloned
Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-tests" meteor test-packages ./ --port 8888

Support this project:

Sponsor via GitHub
Support via PayPal — support my open source contributions once or on regular basis
Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website

timsun28/flow-router