Cannot read property 'originalHref' of undefined error. Ionic react IonTabBar issue

Question

I'm attempting to log into my app, authorize via mongodb stitch, then route the user off the login page to an account page. I'm storing my auth info in a react context object and using the variable isLoggedIn to decide whether to display the login page or the user account page. I am able to successfully login with mongo, thus switching isLoggedIn to true, then I receive the error written below. I can manually in my browser direct myself to the account path and see that my user is logged in. I'm not sure what the issue is with the IonTabBar though and why it can't be rendered conditionally.

Here is my App component, leaving out my imports. I can provide useStitchAuth() or any code to SitchAuthProvider as well if needed. StitchAuthProvider is just a functional component that returns a context provider with my auth info.

const App: React.FC = () => (
    <StitchAuthProvider>
        <AppUI/>
    </StitchAuthProvider>
);

function AppUI() {
    const {
        isLoggedIn,
        actions: {handleLogout, handleUserLogin},
    } = useStitchAuth();
    return (
            <IonApp>
                <IonReactRouter>
                    {isLoggedIn ?
                        <IonTabs>
                            <IonRouterOutlet>
                                <Route path="/account" component={Account} exact={true}/>
                                <Route path="/home" component={Home} exact={true}/>
                                <Route path="/my_pet" component={MyPet}/>
                                <Route path="/edit_goal/:id" component={EditGoal} exact={true}/>
                                <Route path="/edit_epic/:id" component={EditEpic} exact={true}/>
                                <Route path="/epic_goals/:id" component={EpicGoals} exact={true}/>
                                <Route path="/completed_view" component={CompletedItemView}/>
                                <Route path="/" render={() => <Redirect to="/account"/>} exact={true}/>
                            </IonRouterOutlet>
                            <IonTabBar slot="bottom">
                                <IonTabButton tab="Account" href="/account">
                                    <IonIcon icon={triangle}/>
                                    <IonLabel>Account</IonLabel>
                                </IonTabButton>
                                <IonTabButton tab="Home" href="/home">
                                    <IonIcon icon={ellipse}/>
                                    <IonLabel>Home</IonLabel>
                                </IonTabButton>
                                <IonTabButton tab="MyPet" href="/my_pet">
                                    <IonIcon icon={square}/>
                                    <IonLabel>MyPet</IonLabel>
                                </IonTabButton>
                            </IonTabBar>
                        </IonTabs> :
                        <IonTabs>
                            <IonRouterOutlet>
                                <Route path="/login" component={Login} exact={true}/>
                                <Route path="/sign_up" component={SignUp}/>
                                <Route path="/" render={() => <Redirect to="/login"/>} exact={true}/>
                            </IonRouterOutlet>
                            <IonTabBar slot="bottom">
                                <IonTabButton tab="Login" href="/login">
                                    <IonIcon icon={triangle}/>
                                    <IonLabel>Login</IonLabel>
                                </IonTabButton>
                            </IonTabBar>
                        </IonTabs>
                    }
                </IonReactRouter>
            </IonApp>
    );
}

export default App;

So an IonTabs component containing IonRouterOutlet and IonTabBar are the only differences. I want to change this based on whether someone is logged in or not. I've tried using {isLoggedIn && xxxx} statements on the routes and the tab bars but that hasn't worked either.

Here is my stack trace. Also worth noting that in the error code that shows in my app display and not console, I see some library code from IonTabBar and some commented out code on top of a function saying "Check to see if the tab button href as changed, and if so, update it in the tabs state". I'm assuming this isn't something I should be trying to do manually in my code but this could be what isn't happening properly.

IonTabBar.tsx:63 Uncaught TypeError: Cannot read property 'originalHref' of undefined
    at IonTabBar.tsx:63
    at forEachSingleChild (react.development.js:1118)
    at traverseAllChildrenImpl (react.development.js:1007)
    at traverseAllChildrenImpl (react.development.js:1023)
    at traverseAllChildren (react.development.js:1092)
    at Object.forEachChildren [as forEach] (react.development.js:1140)
    at getDerivedStateFromProps (IonTabBar.tsx:60)
    at applyDerivedStateFromProps (react-dom.development.js:12625)
    at updateClassInstance (react-dom.development.js:13229)
    at updateClassComponent (react-dom.development.js:17131)
    at beginWork (react-dom.development.js:18653)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23234)
    at performUnitOfWork (react-dom.development.js:22185)
    at workLoopSync (react-dom.development.js:22161)
    at performSyncWorkOnRoot (react-dom.development.js:21787)
    at react-dom.development.js:11111
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11061)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11106)
    at flushSyncCallbackQueue (react-dom.development.js:11094)
    at scheduleUpdateOnFiber (react-dom.development.js:21230)
    at dispatchAction (react-dom.development.js:15682)
    at handleUserLogin (StitchAuth.tsx:79)

index.js:1 The above error occurred in the <IonTabBarUnwrapped> component:
    in IonTabBarUnwrapped
    in Unknown (at App.tsx:71)
    in div (created by IonTabs)
    in IonTabs (at App.tsx:60)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:58)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:57)
    in AppUI (at App.tsx:47)
    in StitchAuthProvider (at App.tsx:46)
    in App (at src/index.tsx:6)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb    .me/react-error-boundaries to learn more about error boundaries.

Thanks to all for viewing my issue. Any help would be appreciated. Thanks

Answer 1

I had the same errors. Rather removing the entire element, try to use hidden property. This should preserve the DOM element but manipulating the visibility. Width of tab button are adjusted when I hide them.

<IonTabButton tab="Account" href="/account" hidden={!isLoggedIn}>