Meteor React-Router Accounts

Router.jsx

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { BrowserRouter, Route, Link, Redirect, withRouter, Switch} from "react-router-dom";

// pages accessible to all users
import Home from './Home';
import Login from './Login';

// pages accessible to authenticated users only
import Profile from './Profile';

export let AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route {...rest} render={props => (
    <Layout>
      <Component {...props} />
    </Layout>
  )} />
);

const PublicNavbar = () => (<div style={{height: 50, borderBottom: '1px solid black'}}> Navbar </div>);
const AuthenticatedNavbar = () => (<div style={{height: 50, borderBottom: '1px solid black'}}> Authenticated Nav </div>);

class PublicLayout extends React.Component {
  render() {
    return (
      <div>
        <PublicNavbar />
        {this.props.children}
      </div>
    );
  }
}

class AuthenticatedLayout extends React.Component {

  render() {
    if(Meteor.user()) return (
      <div>
          <AuthenticatedNavbar />
          {this.props.children}
      </div>
    );
    return (
      <div>
        <Login />
      </div>
    );
  }
}

class Router extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>

          // public routes
          <AppRoute exact path="/" layout={PublicLayout} component={Home} />
          <AppRoute exact path="/login" layout={PublicLayout} component={Login} />

          // logged in routes
          <AppRoute exact path="/profile" layout={AuthenticatedLayout} component={Profile} />
        
        </Switch>
      </BrowserRouter>
    );
  }
}

export default withTracker(props => {
  return {
    user: Meteor.user()
  }
})(Router);

Explanation:

• public components are visible by everyone, they use the PublicLayout
• authenticated components are visible by authenticated users only - they use the AuthenticatedLayout

We could have an arbitrary number of layouts. In the example above, there are two layouts - each with it's own navbar.