Search code examples
http-redirectmeteorbrowser-historyflow-router

Meteor FlowRouter: replace path in history for restricted route


I'm using FlowRouter in a Meteor app. In one case, a resource is not available until a certain date/time, so we redirect to another route. Is there anyway to replace the route to the restricted resource with the path to the redirect such that the restricted resource route will not appear in the browser history. Doing will make the history (using back, forward) more UX friendly.

I can achieve this in FlowRouter's triggersEnter for the route, by stepping outside of FlowRouter with something like:

if(restricted) {
  return window.location.replace(`/waitingroom/${resourceId}/user/${Meteor.userId()}`);
}

...but this causes a page reload, which is sort of undesirable.

Any idears?


Solution

  • Functions pass to triggersEnter have the 2nd param named redirect you can use it to redirect to other pages without reloading the page and having a clean history:

    FR.route('/restricted-route', {
      name: 'RestrictedRoute',
      triggersEnter: [function(context, redirect) {
        redirect('/replace-route');
      }]
    });
    
    FR.route('/replace-route', {
      name: 'ReplaceRoute',
      action() {
        // ...
      }
    });
    

    Updated

    I am not sure why it's required to be sync. Anyway FlowRouter uses Page.js behind the scene to do navigation, if you can not use redirect then this should work:

    FR.route('/restricted-route', {
      name: 'RestrictedRoute',
      triggersEnter: [function(context, redirect) {
        Meteor.setTimeout(() => {
          FlowRouter._page.replace('/replace-route');
        }, 1000);
      }]
    });
    

    Note: this is not the public API, therefore you should test it carefully before using in production.