React not freshing properly for conditional nav tab

help
1

This is my code for client/MainLayout.jsx:

import React from 'react';
import AccountsUI from '../components/AccountsUI.jsx';
import ShowGrantAccess from './ShowGrantAccess.jsx';

export const MainLayout = ({content}) => (
    <div className="main-layout">
        <header>
            
            <nav>
                <a href="/">Home</a>
                <ShowGrantAccess/>
                <AccountsUI />

            </nav>
        </header>
        <main>
            {content}
        </main>

    </div>
);

client/components/ShowGrantAccess.jsx:

import React, {Component} from 'react';

    export default class ShowGrantAccess extends Component {

        render() {
            if (Meteor.userId()) {
                return <a href="/grantaccess">Grant Access</a>
            } else {
                return false
            }
        }
    }

client/AccountsUI.jsx:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';


import {Accounts} from 'meteor/accounts-base'

Accounts.config({
    forbidClientAccountCreation: true,


});


export default class AccountsUI extends Component {


    componentDidMount() {
        this.view = Blaze.render(Template.loginButtons,
            ReactDOM.findDOMNode(this.refs.container));

    }

    componentWillUnmount() {
        Blaze.remove(this.view);
    }

    render() {
        return <span ref="container"/>
    }
}

client/routes.jsx:

import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from './layouts/MainLayout.jsx';
import Home from './components/Home.jsx';
import GrantAccess from './components/GrantAccess.jsx';
 

FlowRouter.route('/', {
    action() {
        mount(MainLayout, {
            content: (<Home />)
        })
    }
});

//Check if login
if (Meteor.userId()) {
    FlowRouter.route('/grantaccess', {
        action() {
            mount(MainLayout, {
                content: (<GrantAccess />)
            })
        }
    });
}

Question is why after user login, there is no refresh to make Grant Access tab appear unless I manually reload page?

Similarly when user logout, the Grant Access tab is still there unless the page is also manually loaded???

Must I do some componentDidMount() and componentWillUnmount() within the GrantAccess.jsx file?

2

React doesn’t know when data changes unless you tell it - that’s what integration packages like react-meteor-data and react-komposer are for