Flow Router vs ReactRouter, thoughts?

1

I’m wondering what people think of Flow Router vs ReactRouter. As far as I can tell, there are a couple advantages of ReactRouter over the former:

  • Much more terse, just basically a hierarchical tree of routes
  • More universal (the entire React community) when running into issues, getting updates, etc.

I find that I often don’t even use most of the features in Flow Router. Since it’s best practice to check user auth in the templates or components, I don’t use triggersEnter anymore to check auth.

Are there any other advantages that Flow Router offers, or disadvantages of ReactRouter?

2 Likes
2

For me it’s more a matter of JS vs XML, to each their own. I don’t like XML at all, so I went with Flow Router when learning React.

1 Like
3

You don’t have to use JSX to define your routes.

https://github.com/reactjs/react-router/blob/master/examples/huge-apps/app.js

Personally, I like flow router its simple and easy to get started with. I recently and currently am picking up react router and I personally feel like it gives alot more control over the react ecosystem.

1 Like
4

I’m excited that React Router has really improved a ton in the last year. I think using the mixins and context stuff was a huge hassle back in the day, but React Router has gotten much simpler now to the point where I’m much more comfortable recommending it. The thing I really love about Flow Router is that it’s just a way to call a function when you hit a certain URL - it couldn’t get much easier to understand than that.

5

You mean JSX, right? (which is obviously XML’ish) But React is all JSX, so how is using ReactRouter any different from that?

6

Personally I don’t think using JSX for the routes makes sense to me because in react it’s used because it is similar to HTML. In the router, there is no need to be like HTML.

3 Likes
7

Thanks for this topic!!
I’m surprised no one mentioned:

Flow Router does NOT support (easily) blocking navigation.
Something very easy to do with old Iron Router and React Router.
Helping prevent user from navigating away and not saving their data.
Here the link that made my particular project React Router:

8

IMO auto-saving data would be a better choice than blocking navigation.

3 Likes
9

I wish all the routers in the world didn’t support it. Blocking navigation is such a pain from the user perspective. Autosave is much better, like @sashko suggested.

It’s a bit tricky. I do like JSX and I definitely appreciate its advantage. But I don’t like XMLish markup in overall, so wherever I have an alternative option, I’ll use it.

Anyways for people coming from Blaze, I guess Flow Router feels like the natural choice.

1 Like
10

auto-saving and caching work fine for normal form data. But there are other place where it does not work well at all.
For example: User is editing a bitmap or SVG image and they click a ‘navigate to’ button (back button on the Browser). The best I was able to do in FlowRouter was 'Hey … you know that image you were editing you didn’t click Save … I can’t show you it (the template OnDestory has been called) but I still have it … do you want to save it?
Ok, I left out the sarcasm, but ReactRouter would have allowed me VERY EASILY to keep the image up while I warn the user…
This was a conscious design decision by FlowRouter (Arunoda). Handle this stuff at the component level not the Router.
I like FlowRouter and would use it. But @ffxsam was asking for ‘differences and advantages’.
ReactRouter is different than FlowRouter in this very specific way.

11

Is anyone else using FlowRouter just to update the route in a redux store? e.g. a project I’m working now is all tabs (which handle their own “routing” (mounting) as soon as tab is selected). It’s nice a nice pattern too for keeping parts of the state on the URL - to share URLs and use back button, etc.

2 Likes
12

Yep! I use Redux to dispatch navigation events (USER_NAVIGATED_TO) which basically just calls FlowRouter.go. And to avoid magic strings, I export all the route names from routes.js, e.g.:

export const ROUTE_DASHBOARD = 'dashboard';
export const ROUTE_LOGIN = 'login';
3 Likes