FlowRouter 4.0 and Future of Routing in Meteor

announce
21

@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
22

Yes it is. Weā€™ll have that.

2 Likes
23

@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.

24

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
25

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

3 Likes
26

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

27

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.

28

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).

29

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
30

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
31

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.

32

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

33

@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

34

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
35

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

36

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

37

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:

38

Puh ā€¦ this looks a bit scary to me, even that this is currently functional for you I wouldnā€™t use it.

Look at this short question on Github to @arunoda ā€“ so I would suggest to use FlowRouters options elements at least, like:

FlowRouter.route('/path/', {
  Content1: <Component1 />,
  Content2: <Component2 />,
  action: function(params) {
    ReactLayout.render(Layout, { });
  }
});

Not sure if something like this will work for you but you may access those options via:

{ FlowRouter.current().route.options.reactComponent() }

Just my 2cents
Tom

39

I really hope it is featured in core, I really like FlowRouter. Itā€™s the perfect setup of features that makes it very easy to use

40

Yep, the Meteor Guide is going to be built around Flow Router.

1 Like