[Ann] Reaktor - New Router for React

react
1

I’ve been getting a lot of questions asking to compare FlowRouter and ReactRouter. And one of the claim, ReactRouter gets is, it can do nested layouts.

Frankly, IR and FlowRouter has that functionality from the very beginning.

So, I decided to hack for around 1 hour and created React Router like router for Meteor. It used FlowRouter and ReactLayout behind the scenes and it’s 100% FlowRouter compatible. So, we can have SSR and other cool features flow router has.

This is how it works:

  Reaktor.init(
    <Router>
      <Route path="/" layout={Layout} content={BlogList} />
      <Route path="/blog/:page" layout={Layout} content={BlogPost} />
      <Route path="/about" layout={About} />
        <Route path="/about/company" layout={Layout} content={Company}  />
    </Router>
  );

I don’t have a release yet. But there’s a demo. See: https://github.com/arunoda/reaktor-demo

I’m going to release this with FlowRouter 2.0 and register here for the webinar.

12 Likes
2

Very nice!

It would be nice if you could have the layout in <Router> and have it pass as props down to the children (I think you’d have to manually map over the children and cloneWithProps). Thoughts?

so it writes like this:

Reaktor.init(
    <Router layout={Layout}>
      <Route path="/" content={BlogList} />
      <Route path="/blog/:page" content={BlogPost} layout={OtherLayout} />
      <Route path="/about" />
        <Route path="/about/company" content={Company}  />
    </Router>
  );
4 Likes
3

Okay. That’s interesting. That’s can be done.
And if needed, can override.

So, we can use defaultLayout instead of the layout.

3 Likes
4

This is amazing, I’m very excited for Flow-Router 2.0 even though I know you’ve mentioned it’s primarily a naming convention since everything is working very well already.

I can’t wait until Meteor 1.2 comes out and I can fully make the switch!

1 Like
5

Only 52 lines of code… wow :stuck_out_tongue: I guess I can just copy the source code into local package until release?

6

Yes. You can do it :slight_smile:

7

Very nice @arunoda! Here’s another challenge for you that I’ve been tackling. At the very least, I’d like to hear your thoughts.

In a tab-nav app, routing isn’t so simple. If you think about instagram or any similar app, there is typically a different “Navigation controller” for each tab. Thus, you can bounce around between tabs, and it will remember the history on that tab. Thus, we can’t route using a single history, and it would be ridiculous to keep all of that application state in the URL.

Any ideas?

1 Like
8

Nice, would you call this a React wrapper then for FlowRouter and Layout? Because basically it’s just the same router with layout but marked up as React components, I mean there are no other “benefits” as far as I can see, or am I missing something?

I like it though, mainly because it was so easy to cook up with what you already had.

What I like about React Router are the extra features for history and scroll behavior. Scroll is perhaps more layout related.

:+1:

9

I think rest can be done with separate packages. I’ve one example for scroll positions. I bet we’ll a lot packages soon addressing a lot of common cases. Trust me. Scroll history is almost done for one of our own app.

I don’t wanna bring more stuff to flow’s core. Let the packages implements them.

Nice, would you call this a React wrapper then for FlowRouter and Layout? Because basically it’s just the same router with layout but marked up as React components, I mean there are no other “benefits” as far as I can see, or am I missing something?

Yes. I agree. FR has it’s set of features. But, we are also engineering it with the rest of the Meteor platform. SSR and Page load speed are two such cases.

10

We dealt with such a case for Kadira. It’s mainly a tab app. But inside tag there are a lot of sub tabs and controls. We still keep everything with queryString but for each specific tab.

When you are moving into different tab, it’ll pick the last state for that tab and so on.

We implemented it, but it’s not a general purpose solution. Need some interaction with the app. May be we can soon open source some of it.

@pahans any idea on generalising Kadira’s URL state logic?

11

Using Flow Router and React Layout you can pass params into the content as shown here from the docs page:

FlowRouter.route(’/:postId’, {
action(params) {
ReactLayout.render(MainLayout, {content: <BlogPost {…params} />});
}
});

Can you do this using Reaktor?

12

Yep. You can access it from this.props.params.

See more on that: https://github.com/kadirahq/meteor-reaktor#accessing-route-context

1 Like
13

Thanks @arunoda. I was actually trying to pass down the name of the route as a prop or param, but its unnecessary since I just found out your API does this…

var routeName = FlowRouter.getRouteName();
console.log("Current route name is: ", routeName);

Which is exactly what I wanted. I’m using the route name as the title in the AppBar material UI component. Works perfect with just 1 line of code!

2 Likes
14

how Can i restore the browser state when using flow router with react?such as the scrollbar position?

15

You can set it as a queryParam or you can use triggers.
See: Implementing Page Position History

16

Thank you for your help, I see the method, seems to just recorded before and after the two paths of position, if I top navigation is four or more, between the several pages when switching, is it still worked?

17

Hey guys I posted and issue here: https://github.com/kadirahq/meteor-react-layout/issues/14

I am trying to figure out how to properly switch between two layouts. I assume I need to unmount or my layouts are wrong if I am getting that error, but I get it when I try to change from one layout to another. Any care to tell me what I am doing wrong?