Я пытаюсь войти в свое приложение, авторизоваться через mongodb stitch, а затем направить пользователя со страницы входа на страницу учетной записи. Я храню свою информацию об аутентификации в объекте реагирующего контекста и использую переменную isLoggedIn, чтобы решить, отображать ли страницу входа или страницу учетной записи пользователя. Я могу успешно войти в систему с mon go, переключив isLoggedIn на true, и я получаю сообщение об ошибке, написанное ниже. Я могу вручную в своем браузере направить себя к пути к учетной записи и увидеть, что мой пользователь вошел в систему. Я не уверен, что проблема с IonTabBar, хотя и почему он не может быть отображен условно.
Вот мой компонент приложения, исключая мой импорт. Я могу предоставить useStitchAuth () или любой код SitchAuthProvider, а также при необходимости. StitchAuthProvider - это просто функциональный компонент, который возвращает провайдер контекста с моей информацией об аутентификации.
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 и закомментированный код поверх функции, говорящий «Проверьте, не изменилась ли кнопка вкладки, и если Итак, обновите его в состоянии вкладок ". Я предполагаю, что это не то, что я должен пытаться сделать вручную в своем коде, но это может быть тем, что не происходит должным образом.
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.
Спасибо всем за просмотр моей проблемы. Любая помощь будет оценена. Спасибо