React router: Proper handling of admin-only routes

Hi guys.

So I started of with meteorchef’s base, which uses react-router V3.
The initial routes.js file looks like THIS.

As you can see, react-routes’s onEnter prop is used for authentication.
Now I wanted to use the same technique to check for admin accounts on my admin routes.
Problem is, that Meteor.user() always returns undefined when I do this. I tried doing the same thing in componentWillMount() in my admin layout file - same result. Meteor.user() is always undefined.

What am I missing?

best, P

Meteor.user() is a reactive source. It is possible that it isn’t available on initial page load (during connection establishment). So you can do 2 things:

  1. Use fastrender package to have all data available when the page has loaded.
  2. Wrap a Meteor container over your Router component and pass the user object to it as prop. It will trigger an update if it is available.

Is fastrender still maintained? And does it work properly with react?
I wanted to avoid the second option as having a “huge” Meteor container wrapping absolutely everything seems somehow … wrong to me?! Or is this the way to go to have Meteor.user() available everywhere in the React app ?!

Yeah, there is a maintained fork available, it works with React. If you deal with Tracker resources like Meteor.user(), the container is the way to go. That’s how React handles things, pass props down to child components. So you’ll often have a top component which passes down data, f.e. a language provider or something else.