Awesome
<a href="https://ostr.io/info/built-by-developers-for-developers?ref=github-flowrouter-repo-top"><img src="https://ostr.io/apple-touch-icon-60x60.png" height="20"></a> <a href="https://meteor-files.com/?ref=github-flowrouter-repo-top"><img src="https://meteor-files.com/apple-touch-icon-60x60.png" height="20"></a>
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
index.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
}
});
NOTE: If you're using TypeScript, FlowRouter supports it. For types to work you need to install and follow the instructions of zodern:meteor-types if you haven't done it already.
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 routemeta
tags,script
andlink
(CSS), set per-route stylesheets and scriptscommunitypackages: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 tutorialcommunitypackages:inject-data
- This is the package used byfast-render
to push data to the client with the initial HTMLflean:flow-router-autoscroll
- Autoscroll for Flow Routermealsunite:flow-routing-extra
- Add-on for User Accountsnxcong:flow-routing
- Add-on for User Accounts (alternative)forwarder:autoform-wizard-flow-router-extra
- Flow Router bindings for AutoForm Wizardnicolaslopezj:router-layer
- Helps package authors to support multiple routerskrishaamer: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
Running Typescript Test
- Install tsd as a global package
- Run
tsd
in your terminal. Tsd will find the correct *.test.d.ts file and return with any errors.
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