Skip to content

quick-start.md

Latest commit

 

History

History
144 lines (112 loc) · 3.81 KB

quick-start.md

File metadata and controls

144 lines (112 loc) · 3.81 KB

Quick Start

Learn how to create routes and pull data from Method or Subscription

Install

# Remove original FlowRouter
meteor remove kadira:flow-router

# Install FR-Extra
meteor add ostrio:flow-router-extra

Note

This package is meant to replace original FlowRouter package kadira:flow-router, it should be removed to avoid interference and unexpected behavior

ES6 Import

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

Create your first route

Create the first route and * catch all route to serve "404" page

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

// Create index route
FlowRouter.route('/', {
  name: 'index',
  action() {
    // Do something here
    // After route is followed
    this.render('templateName');
  }
});

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

Pull data from a Subscription

Create a route with parameters and pull data from Subscription

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

// Going to: /article/article_id/article-slug
FlowRouter.route('/article/:_id/:slug', {
  name: 'article',
  action(params, queryParams, articleObject) {
    // Pass fetched article data to template
    this.render('article', articleObject);
  },
  waitOn(params) {
    // All passed parameters is available as Object:
    // { _id: 'article_id', slug: 'article-slug' }
    console.log(params);

    return Meteor.subscribe('article', params._id);
  },
  async data(params) {
    // All passed parameters is available as Object:
    // { _id: 'article_id', slug: 'article-slug' }
    console.log(params);

    return await ArticleCollection.findOneAsync(params._id)
  }
});

Pull data from a Method

Create a route with parameters and pull data from Method

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

// Going to: /article/article_id/article-slug
FlowRouter.route('/article/:_id/:slug', {
  name: 'article',
  action(params, queryParams, articleObject) {
    // Pass fetched article data to template
    this.render('article', articleObject);
  },
  async data(params) {
    // All passed parameters is available as Object:
    // { _id: 'article_id', slug: 'article-slug' }
    console.log(params);

    return await Meteor.callAsync('article.get', params._id);
  }
});

Create a route with GET-query string

Use GET-parameters for conditional logic

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

// Going to: /article/article_id?comment=123
FlowRouter.route('/article/:_id', {
  name: 'article',
  action(params, queryParams) {
    // All passed parameters and query string
    // are available as Objects:
    console.log(params);
    // { _id: 'article_id' }
    console.log(queryParams);
    // { comment: '123' }

    // Pass params and query string to Template's context
    this.render('article', { ...params, ...queryParams });
  }
});

Tip

if you're using any package which require original FlowRouter namespace and throwing an error, you can solve it with the next code

// in /lib/ directory
Package['kadira:flow-router'] = Package['ostrio:flow-router-extra'];

Further reading