我试图登录我的应用程序，通过mongodb stitch进行授权，然后将用户从登录页面路由到账户页面。我将我的认证信息存储在一个react context对象中，并使用变量isLoggedIn来决定是显示登录页面还是用户账户页面。我能够用mongo成功登录，因此将isLoggedIn切换为true，然后我收到了下面写的错误。我可以在浏览器中手动引导自己的账户路径，看到我的用户已经登录了。不过我不知道IonTabBar的问题是什么，为什么不能有条件的渲染。
这是我的App组件，省去了我的导入。如果需要的话，我也可以提供useStitchAuth()或者任何代码给SitchAuthProvider。StitchAuthProvider只是一个功能组件，它返回一个包含我的auth信息的上下文提供者。
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;
所以一个IonTabs组件包含IonRouterOutlet和IonTabBar是唯一的区别。我想根据某人是否登录来改变这个功能。我试过在路由和标签栏上使用{isLoggedIn && xxxx}语句，但也没有用。
这是我的堆栈跟踪。另外值得注意的是，在我的应用程序显示的错误代码中，而不是在控制台，我看到一些来自IonTabBar的库代码和一些注释出来的代码在一个函数的顶部说："检查是否tab按钮的href被改变，如果是，在tabs状态下更新它"。我假设这不是我应该在我的代码中尝试手动完成的事情，但这可能是没有正确发生的事情。
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.
谢谢大家查看我的问题。任何帮助将被感激。谢谢你的帮助
我也有同样的错误。 与其删除整个元素，不如尝试使用隐藏属性。这应该保留DOM元素，但操作的可见性。当我隐藏它们时，tab按钮的宽度被调整。
<IonTabButton tab="Account" href="/account" hidden={!isLoggedIn}>