kadirahq / flow-router Goto Github PK

Hello,

I have a menu in my app and I want to highlight the current link in it. The FlowRouter.current() isn't reactive and you're discouraging the use of FlowRouter.currentReactive(). I'm wondering what's the correct way of implementing this "feature" with FlowRouter?

Hello,

I'm wondering how to handle the "no data" scenario with the FlowRouter. Let's say I want to have a route /article/:slug on which I want to render an Article (fetched by the slug field) along with related comments (separate collection). So I'll define a route like this:

FlowRouter.route('/article/:slug', {
  subscriptions: function(params) {
    this.register('article', Meteor.subscribe('articleSlug', params.slug));
    this.register('comments', Meteor.subscribe('commentsByArticleSlug', params.slug));
  },
  action: function() {
    FlowLayout.render('appLayout', { main: "articleDetail" });
  }
});

In the template I'll display the article details & comments when when subs are ready, until then just "loading..." text.

But what if the :slug param in the URL doesn't match any article in the DB? I don't want to keep displaying the "loading..." text, I want to display some sort of "Article not found" message. How to do this?

Thanks for any advice.

Set base url with page.base(path) using __meteor_runtime_config__.ROOT_URL_PATH_PREFIX

Hi,

It'd be usefull to be able to unset params via setQueryParams, by setting undefined, or null ?

We need an API to get params. Currently we are depending on the Router.current() for that.
So, for any URL changes, app will get re-rendered. So can it by giving an api like below.

FlowRouter.getParam('key');

Just to let you know that the only thing that prevents me from switching to flow-router is that I use the useraccounts package. I hope they will allow soon to use flow-router (see meteor-useraccounts/core#308).

Is there a good strategy on migrating a page using iron:router to flow router? I'm just having problems with the new iron:router and flow router seems really predictable. I have to admit that I've just looked ad flow router for the first time and it might be so easy, that you don't need a guide or good advise for migrating it, but it might be a question other people have as well. So maybe a small migration guide or a comment in the docs might be helpful!

Does Flow-Router has Cordova support?

I'm finishing to spend my application from Iron-router to Flow-layout and am very happy with the result. the only thing I'm missing now is to check the permissions of a user and see if he can enter the route

on iron router I was doing something like this

Router.onBeforeAction(function () {
  var user = Meteor.user();
  // check
});

and flow-router would be something like this

FlowRouter.middleware(function () {
  Tracker.autorun(function () {
    if (FlowRouter.subsReady()) {
      var user = Meteor.user();
      // check
    }
  })
});

I'm not sure if this is the right way to use flow-router so I would ask if there is a better way

See how I did it for IR.
See: https://github.com/meteorhacks/fast-render/blob/master/lib/server/iron_router_support.js

I know this is still a work in progress but I hope to add support for flow to kestanous:candid and kestanous:herald. Are there thoughts and/or options for the following?

Candid will need some kind of before hook that tells it what the current route is, and if it should stop the route (this may work at the component level as well).

Herald will just need to know the current route reactively (to mark notifications as read) and be able to take a user to a route (this may even just trigger some logic, it depends on flow).

No rush on replying, just try to get in the queue ^_^

Hi, thanks for your work!
I would like to try out flow router in my application, but after reading the documentation it is still not completely clear to me, what to do if a user logs in, logs out (and maybe logs in as a different user after that). In iron router, the page reloaded "all by itself" if one used Meteor.user() in the route action or in waitOn. I have some user-specific settings that I use for some subscriptions. If a user logs in, these subscriptions have to be updated. Do I have to use an autorun somewhere in my application code to check for that and then reload the page? Or is there a better way to do that?

FlowRouter.ready() gives true before the global subscriptions became ready.

The README should mention differences/benefits to iron-router. Why should I use flow router to begin with? It is because of the flow-components architecture? is it just because it lightweight.

Right now middleware gets path only and action gets params and queryParams.

I'm thinking it makes sense to instead pass the 'current' object to both of those. We can get all three objects from that (path, params, queryParams).

I noticed I'm doing FlowRouter.current() in action() to get the whole path. I'm sure it seems like an action() will already know its path, but, with params and queryParams involved it changes.

Also, in middleware I use FlowRouter.getParam because it only has path.

It seems it would be consistent to always provide the current object (FlowRouter.current()).

What are your thoughts?

Add these essential helper methods

// generate a path according to this 
FlowRouter.path('/courses/:courseId', {courseId: 100});

// generate a path and route to that
FlowRouter.go('/courses/:courseId', {courseId: 10});

// If this route has this key, change it and re-route
FlowRouter.setParams({key: value})

// Get the query string param for key
FlowRouter.getQueryParam(key)

// Set this query string params and re-route
FlowRouter.setQueryParams(key: value})

FlowRouter.route('/blog/:postId')

I'm getting an error

There is no route for the path: /blog

How can I use FlowRouter.go?

FlowRouter.go('/blog', {postId:postId})?
FlowRouter.go('blog', {postId:postId})?
FlowRouter.go('/blog/'+postId)?

Does flow router support url hashes?

I'm considering the use of hashes as a way to control the UI (i.e. show/hide modals) of a single page (single route). This is a pattern that Iron Router does a poor job of explaining but i believe is a very common pattern. Thanks

As there are no hooks available, is there a way to replicate this behavior below?

Router.onStop(function () {
  IonScrollPositions[Router.current().route.getName()] = $('.overflow-scroll').scrollTop();
});

I mean, is there an easy way to run some sort of code right before a route change? Middlewares aren't able to do that because it runs only at the initialization step and it's already lost previous route access.

Thanks

Hey there, I've been playing around with React lately and I've been using flow-router instead of iron-router because its way less opinionated (about blaze, particularly).

Anyways, I'm curious how I could get server-side rendering working. React has this method React.renderToString that should make it easy for SSR. This is clearly incomplete, but here's the idea:

https://github.com/ccorcos/meteor-react/blob/master/examples/SSR/main.jsx

I was looking around the fast-render code, and it looks like it relies on (1) subscriptions through flow-router, and (2) Meteor.subscribe. I'd like to use a React mixin to do subscriptions from within the React classes and I'd also like to use subs-manager.

Any suggestions on where/how to get started with this?

Thanks

I spent a little while trying to debug this:

FlowRouter.route('/unit/:unitId') //works
FlowRouter.route('unit/:unitId') //does not work and does not throw an error

If the route does not start with a forward slash it does not work. If this is the intended behavior can we get an error? Or is this supported in a way that I am not thinking of?

Hello arunoda,

I'm trying to switch from IronRouter to FlowRouter. I am using FlowLayout aswell.
Here is my issue. Since there is no support for IronRouter {{pathFor}} functionnality like, yet, i am writing my links directly like this <a href="/signin">Sign in</a>

Problem is when i click on a link, the page reload completely. This looks strange for me because the layout is the same for the views, only the template change.

My layout looks like this:

<template name="externalFormLayout">
    <div id="external-form">
        {{> Template.dynamic template=main}}
    </div>
</template>

And the routes:

_signin_

FlowRouter.route('/signin', {
    action: function (params) {
        FlowLayout.render('externalFormLayout', {
            main: 'signinTemplate'
        });
    }
});

_signup_

FlowRouter.route('/signup', {
    action: function (params) {
        FlowLayout.render('externalFormLayout', {
            main: 'signupTemplate'
        });
    }
});

Is it a FlowRouter or a FlowLayout error?

Regards,

William

I call Session.get inside my .subscriptions route. It works without any error and I didn't notice any change.

By reading source code, I think it's purpose to avoid using reactive data in .subscriptions.

How about naming route?

FlowRouter.route('/blog/:postId', {
    name: 'blogDetail',
    action: function(params) {
        console.log("Yeah! We are on the post:", params.postId);
    }
});

use like this:

FlowRouter.go('blogDetail', params);
FlowRouter.path('blogDetail', params);

We can achieve it by other way. Using something like name => path mapping in project. But I think it's nice to have builtin.

Is there a way to create links like with iron routers linkFor / urlFor ?

Also wouldn't it be better to give each route a name so we create links using the name rather than the URL?

Rather than using a url like:

Router.go('/posts');

Use names:

Router.go('postsList');

Creating the route might look something like this:

FlowRouter.route('postsList', '/posts', {
    action: function() {

    }
});

Using names means that if we decide to use a different URL for that route we don't have to change it throughout the application as well.

Feels like a total noobie question, but trying flow-router out instead of IR (hopes it gives a little bit less overhead-feeling). In the IR situation, I had before-hooks, that checked if the user is logged in. After logging out (e.g. Meteor.logout() in console), the router reactively goes to the login page.

This doesn't seem to work in Flow Router. As far as I can tell, the middlewares aren't called when logging out. What is the correct way to do this in FR?

Cheers.

Change the lean to echo :)

for a path defined like this

FlowRouter.route("/apps/:appId/:section/:subSection", {
...
});

FlowRouter.current().path gives "/apps/:appId/:section/:subSection" not something like "/apps/PDsnZug5d5TsZTLqs/dashboard/overview"

Hello arunoda,

Continuing to try to port my IronRouter code to FlowRouter, i am facing a problem with middlewares.
With IronRouter, to ensure that a user was logged-in, i was using this code:

Iron.Router.plugins.auth = function (router, options) {
    router.onBeforeAction(function () {
        if (!Meteor.user() && !Meteor.loggingIn()) {
            if (Router.current() && Router.current().route)
                Session.set('returnTo', Router.current().route.getName());
            Router.go(options.authRoute);
        }
        this.next();
    }, {
        except: [
            'signin',
            'signup',
            'lostPassword',
            'resetPassword',
            'verifyEmail'
        ]
    });
};

Now, to switch to FlowRouter, i rewrited my code like this:

var exceptions = [
    '/signin',
    '/signup',
    '/lost-password',
    '/reset-password',
    '/verify-email'
];

FlowRouter.middleware(function (path, next) {
    console.log(path);
    if (!_.contains(exceptions, path)) {
        if (!Meteor.userId()) {
            Session.set('returnTo', path);
            next('/signin');
        }
    }
    next();
});

The main problem, if for routes reset-password and verify-email. Thoses routes accept a parameter token, and the this is the problem. I can't predict this token, ans so, i can't compare with the routes in the exceptions array.

Of course, i could've split the path to keep only the first part of the route, but it will complexify the code.

This should be easy with named routes to handle this issue. Another way would be to provide path and params to middlewared callbacks separately.

What do you think ?

Best regards,

William

Okay, I would like to switch iron router, but I have to make sure I understand everything correct and ask some questions.

Lets take a shop example with admin part.
The basic admin layout is:

sidebar | main-contents

All admin parts must check for a logged in user and his permissions. I should probably use middleware for the check.

_1. How can I check all admin routes with this middleware function ? I can specify this in each route, but if there are 100 routes, this is not so cool. I can do a global middleware, but I want this only for admin part, not the whole website. What is the solution?

_2. In the sidebar there is orders counter, so it is shared across all the admin routes. As far as I understand, route subscriptions are re-run on route check. I want the global orders subscription for all admin routes. Global subscription is again for the whole website. I can use template helpers, but.. the router aims to do that kind of stuff, yes? What is the solution?

Next part is the orders page. I want to use flow layout. The layout is like the admin one, but with an upgrade.

sidebar | orders-list | selected order

_3. Can I nest the admin layout, insert in the main-contents part the template with 2 dynamic parts and then insert this two parts. Smth like:

FlowLayout.render('admin-layout', { 
    sidebar: "admin-sidebar", main-contents: "admin-two-sections",
    // This is the admin-two-sections 2 dynamic parts
    left-section: "admin-orders-list", right-part: "admin-selected-order"
});

Or should I create a new admin-orders layout and duplicate sidebar there ?

_4. As we can see, I use the same sidebar everywhere and have to specify this in every route. With default Meteor behaviour I can make an admin-layout and insert the sidebar template there. {{> admin-sidebar}}. Is this the preferred way to do with the flow layout?

_5. The three routes:
/admin/orders, /admin/orders/:id, /admin/orders/:id/edit use the sidebar and orders-list, so that the only selected order part is changed. Again, I have to copy-paste this in every route. The orders-list shares the global admin subscription and should not re-run on route changes. What is the solution ?

_6. I want named routes, for example /admin/orders named as admin.orders.index and /admin/orders/:id as admin.orders.show. Plus, I want a template helper to insert the path for me.
<a href="helperName 'admin.orders.show' id">{{title}}</a>. This is not included, am I right?

So, all in all, what is the way to nest routes, templates and share subscriptions? Some kind of controllers or route groups stuff, where I can nest the layout, subscriptions, middleware stuff and only add the needed ones?

At the end of Router Definition: (We'll talk about this is a moment).

Is it possible to get access to the page.js context?

I'm curious about using page.js's context to save route specific state for my application.

So I am working on an app that will use GroundDB. I would like to use flow-router in that app but I am having a hard time building the data flow.
Here is what I mean:

//lets assume this route
FlowRouter.route('/myPost/:postId', {
  subscriptions: function(params, queryParams) {
        this.register('myPost', Meteor.subscribe('blogPost', params.postId));
    },
   action: function(params, queryParams) {
        console.log("Params:", params);
        console.log("Query Params:", queryParams);
    }
});

The above is great for online apps where you are only sending down the data that you need. But with all the data, much more then you need, already existing on the client, because they are offline, this does not work as well.

How would I tell my templates which post we want to look at? I could use Sessions but I want to get away from always using globals. I could use FlowRouter.getParam(paramName); but seems like a very bad idea and I doubt it will lead to DRY code. I am considering using FlowLayout and likely normal Blaze.

• throw an error if no route is found for a path
• need a way to handle a 404

Configured path in FlowRouter:

/app/data/:cat?

After first visit to that route the browser location shows:

/app/data

After setting query params via console {priority: '1', status='open'} the browser location is:

/app/data/??priority=1&status=open

And FlowRouter.getQueryParam("priority") will not return value '1'.

Repeat the setQueryParams again (with same values), and it is now:

/app/data/???priority=1&status=open&priority=1

Each subsequent setQueryParams adds another question mark whether I use new query params or the same ones. The question marks just build up.

When I navigate to another route they are cleared out.

When I remove the optional parameter from the route path this issue goes away.

When it's showing /app/data and I set the param with setParams({cat:'blah'}) the browser location shows:

/app/data/blah?

So, an optional last param causes a question mark to show.
And, setting query params on it causes a build up of question marks.

If I navigate from one route to another and both use the same subscription, is the subscription re-run?

I am having trouble with the Hot Code Reload sending the app to / instead of its current path. I've been trying to figure it out now and again and have yet to do so.

Anyone else run into this trouble? Does it depend on which files were changed to trigger the HCR?

Sometimes it works as it's supposed to.
Other times it redirects to root (often).
It always seems to run twice.

I have Chrome set to preserve the console so I see the "Navigated to" message and then see two route actions run.

After running circles around this one for hours I am still unable to identify exactly what causes the router to change the path. Suggestions on how to hook into the router solely for debugging to see what's going on?

Perhaps it's something with Meteor's HCR automatically doing a login again? Perhaps sometimes the requiredLogin middleware runs and reroutes the user before the auto-login finishes?

Having used Iron Router in the past 12 months, I dreamed about a simpler client-only router package. Here it is, thanks a lot!

In my dream, the new router was decoupled from template rendering. You did it!

In my dream, the new router was decoupled from subscription management. Is there a reason you didn't go this far? What would be the difference between:

FlowRouter.route('/blog/:postId', {
    subscriptions: function(params, queryParams) {
        this.register('myPost', Meteor.subscribe('blogPost', params.postId));
    }
    ...
});

and:

FlowRouter.route('/blog/:postId', {
    action: function(params, queryParams) {
        this.register('myPost', Meteor.subscribe('blogPost', params.postId));
        ...
    }
});

and finally:

FlowRouter.route('/blog/:postId', {});
Tracker.autorun(function() {
    Meteor.subscribe('blogPost', FlowRouter.getParam('postId'));
});

?

In my dream, the new router would even have no action function. Why not just have the following?:

FlowRouter.route('/blog/:postId');
Tracker.autorun(function() {
    // Use the FlowRouter API the way I want
    ...
});

I'm a little confused int he docs here:

https://github.com/meteorhacks/flow-router#flowrouterpathpathdef-params-querystring

I would like to set page header on router property like this:

FlowRouter.route('/blog/:postId', {
    pageHeader: {title: 'My Title', icon: 'home'},
    .........................................
});

how to get the custom property?
because i would like to generate page header, breadcrumbs...

We created flow-router for our internal use and tried our different concepts. But, we forget to bring some of the coolest features IR had. And also, we can make add more features make sure using the router is simple.

Even though, we add more features we need to make sure few things here are they:

• We never use tracker inside the router (exception is for managing subscriptions)
• We never use any kind of rendering engines
• We never want to support REST apis (but, we can have server side rendering support)

You can't add comment on this thread. But subscribe for updates. I'll post about when things will get merged into master.

we can add query params to URL but we cannot remove them.

So I thought I would give your router a quick try and here's what I did:

https://github.com/ciwolsey/flow-router-problem

When visiting /posts all I get is:

Are posts ready? false
Yeah! We are on the posts!

Looks like the subscription status isn't updating reactively. Not sure why. Maybe it's something I'm doing wrong.

If you didn't get it.
I'll do it :)

With that, we can write nested routes quite easily.
May be we can inherit the style used by express.

Hello. Now I'm applying flow router instead of iron router on our service. It's pretty good and well working. Thanks for implementing beautiful router.

I have a question. Why does flow router change url? is this bug?
When i access below page by url, Flow router changes

• /foo? -> /foo
• /foo?a=b%26c&d=e -> /foo?a=b&c&d=e

Thanks in advance.

I have login required middleware something like it:

function requiredLogin(path, next) {
  var redirectPath = (!Meteor.userId())? "/sign-in" : null;
  next(redirectPath);
}

Since Meteor.userId() reactive, when I go to login required router, redirected to /sign-in. Even when I logged in. How did you solve this kind of issue? Do I have to use fast-render?

It's annoying especially in development. Because on every hot code push reload, it redirects to sign-in.