FlowRouter 4.0 and Future of Routing in Meteor

Understandable. Though the only option mentioned explicitly is IronRouter, which from what I can tell has been somewhat deprecated due to no longer being maintained. If the official guide is going to be opinionated, perhaps include some discussion as to why FlowRouter was chosen over the other options.

RenderToString(); RenderToStaticMarkup();

p.s. ReactRouter supports SSR.

Will fast-render still be supported even though subscription registration is being removed from the router? If so, how does the router know which publications to use to send the initial data load?

1 Like

I’m interested in this as well!

@moberegger From the Usage section:

Route subs are in the past for a long time, same as the Iron Router.

Maybe @arunoda is a wizard or a witch, but it already works well. Sometimes I ask myself, why is he still not in the MDG team.

4 Likes

Yes it is. We’ll have that.

2 Likes

@shcherbin I wondered the same thing on @arunoda joining the MDG in my post on Meteor Hacks tangentially addressing this back in May 2014 with Meteor.js and the community and Meteorites everywhere will continue to benefit from such talented developers through their invaluable contributions regardless of where they work much like what has happened in many open-source software projects, but we can still dream.

There are two ways.

  • First with SSR we will identify the subscriptions in the initial run and try to reuse them.
  • then subs-manager directly works with the server side part of flow router.
1 Like

Just curious, why do some people prefer React Router for React with Meteor? Familiarity? Or does it have any technical advantages?

3 Likes

Is there any way how to repeat the following nesting in FlowRouter?

React can do SSR today.

It also can do fancy pinterest style routing out of the box.

For me though, it was the fact that there are hundreds of youtube videos on ReactRouter. I could only find two on FlowRouter, and honestly couldn’t understand half of what the guy said due to a very thick accent.

I want to know something is going to still be supported a year from now. There is no one guy who can get hit by a bus and suddenly ReactRouter stops being supported.

As can FlowRouter AFAIK: The trusted source for JavaScript packages, Meteor resources and tools | Atmosphere (I haven’t tried it however, as I’m developing for Cordova, where it isn’t a consideration).

I take your point about long term support, but the @arunoda is pretty committed to this and related projects, and lets be honest, how many of the packages we use are supported by a company or team vs. an individual, and what’s to say a company doesn’t drop support for something in the future.

And being open source, even if that were to happen, someone could, in principal, take over development. (Doesn’t happen very often in practice, sadly).

There are almost as many routers available for React as there are Flux libraries. It’s just that ReactRouter has won the day.

In terms of the FlowRouter dev’s level of enthusiasm there is no doubt, and it looks quite polished. However, from what I can tell the IronRouter dev was enthusiastic too.

Just got here so didn’t bother to read up on what actually occurred with ironrouter. I just looked for alternatives. Instead of jumping out of the frying pan into the fire, I merely chose a more sustainable option.

I would really like Atmosphere to list the last commit date and current PR count along with the installs on the package cards. That would help a great deal sorting through them all. I currently have to click through to the github repo on each package I look at.

1 Like

I don’t disagree that ReactRouter is defacto standard in the React world, so if I’m not losing out on anything FlowRouter offers by using it (and it doesn’t bring bloat with features I don’t need), I’d certainly consider it.

The pinterest style routing looks neat if you need it, but overkill for most projects. And while watching the React Router experts in that video struggling to get their demo working was quite amusing (and they handled it very well), it hardly inspires confidence. (Although the dynamic code loading does sound very cool for large web projects).

Regarding lack of videos on FlowRouter - I’d consider that an endorsement of how easy FlowRouter is to get started. :smile:

1 Like

Hah that earned a like.

I actually prefer video tutorials these days over anything outside of IBM documentation. You get to understand what the guy is thinking. You also as you pointed out, get to see them realtime encounter and solve problems you are likely to run into.

Nesting is never a problem in Meteor routing. With FlowRouter, you can have different kind of layouts for each router.
By doing that, you can build any complex nesting feature.
You can do some cool stuff like this as well. See: How to pass reactive data to children using Flow Router and React Layout

@arunoda, thanks for explanation, but your example is not working.

I’ve tried something like:

FlowRouter.route('/demo', {
name: 'demo',
action() {
    ReactLayout.render(Layout, {
        content: <Content />
        content2: <Content2 />
    });
  }
});

then in Layout component:

render() {
  return (
    <div>
      <LayoutHeader />
      <main role="main" style={ styles }>
        <this.props.content content={ this.props.content2 } />
      </main>
      <LayoutFooter />
    </div>
  );
}

But, as I remember it always throw something like:

Uncaught TypeError: type.toUpperCase is not a function

It would be nice if you did an exploded description of nesting principles in your guide, because now it is not obvious

In your example, in the router you need to change <Content /> into Content. It should work (I tested).

I ended with this React.cloneElement (you can pass the params from router action, like :title or smth else as props and add another props from the layout layer (user)):

router

FlowRouter.route('/admin/permissions/:title/edit', {
  name: 'admin.permissions.edit',
  action: function (params) {
    ReactLayout.render(Layout, {
      content: <PermissionsEdit title={params.title} />
    });
  }
});

layout

Layout = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      currentUser: Meteor.user()
    };
  },
  render() {
    let content = React.cloneElement(this.props.content, {
      user: this.data.currentUser
    });

    return (
      <section className="admin">
        {content}
      </section>
    );
  }
});

But, you can use your variant, just remove the < and />.

1 Like

Excuse me, but during our tests we had those sometimes too. Just a silly question: have you named your router.jsx so with extension for ES2015?

See my example here (at chapter: next goal): Smoothly feature up your Blaze Apps with React Components

Hello, I’m using universe:modules, so my routes file called routes.import.jsx

If you are interested, just now I’ve tried to do so:

action() {
  ReactLayout.render(Layout, {
    content: <Component1 content2={ Component2 } />
  });
}

and it works as expected which is amazing :grinning: