Блог

Я попытался добавить аутентификацию для входа в свое приложение. Теперь, когда я запускаю приложение с помощью ionic, служите http://localhost:8100/ пусто, однако, когда я добавляю /вход, он ведет меня на страницу входа. Как мне автоматически перенаправить стартовую страницу на /войти. Я совсем новичок в реагировании и ионизирую, поэтому мое понимание состояний довольно ограничено

Исходный код

 App.tsx  import { IonApp } from '@ionic/react'; import { Redirect, Route } from 'react-router-dom'; import React from 'react'  import { IonReactRouter } from '@ionic/react-router';  /* Core CSS required for Ionic components to work properly */ import '@ionic/react/css/core.css';  /* Basic CSS for apps built with Ionic */ import '@ionic/react/css/normalize.css'; import '@ionic/react/css/structure.css'; import '@ionic/react/css/typography.css';  /* Optional CSS utils that can be commented out */ import '@ionic/react/css/padding.css'; import '@ionic/react/css/float-elements.css'; import '@ionic/react/css/text-alignment.css'; import '@ionic/react/css/text-transformation.css'; import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css';  /* Theme variables */ import './theme/variables.css'; import { SignInTabs } from './components/Tabs/MainTabs'; import { SignOutTabs } from './components/Tabs/SignedOut'; import { useContext, useState } from 'react';  interface IUserManager {  setIsLoggedIn: Function; }  const user: IUserManager = {  setIsLoggedIn: () =gt; {} }  export const UserContext = React.createContextlt;IUserManagergt;(user);  const IonicApp: React.FC = () =gt; {  const [isLoggedIn, setIsLoggedIn] = useState(false);  const user = useContext(UserContext);   user.setIsLoggedIn = setIsLoggedIn;  let route = (lt;Route path="/" component={SignOutTabs} /gt;);   if (isLoggedIn) {  route = (lt;Route path="/" component={SignInTabs} /gt;)  }    return(  lt;IonAppgt;  lt;IonReactRoutergt;  {route}  lt;/IonReactRoutergt;  lt;/IonAppgt;  )  }  const App: React.FC = () =gt; (  lt;UserContext.Provider value={user}gt;  lt;IonicApp /gt;  lt;/UserContext.Providergt;  );  export default App;   

 import { IonButton, IonCol, IonContent, IonGrid, IonPage, IonRow } from "@ionic/react" import { UserContext } from "../../App"; import React, { useContext } from 'react' import styled from 'styled-components'  const StyledGrid = styled(IonGrid)`  margin-top: 16em; `;  const StyledRow = styled(IonRow)`  text-align: center; `;  const StyledButton = styled(IonButton)`  --background: black;  border-radius: 50px;  color: white;  font-size: 15px;  width: 210px; `;  const StyledCol = styled(IonCol)`  margin-top: 14em `;  const StyledSignUp = styled(IonCol)`  `;  export const LoginComponent: React.FC = () =gt; {   const user = useContext(UserContext);   const loginClick = () =gt; {  user.setIsLoggedIn(true);  }     return(  lt;IonPagegt;  lt;IonContent fullscreengt;  lt;StyledGridgt;  lt;StyledRowgt;  lt;IonColgt;  lt;img src="assets/icon/logosqr.png" alt="firstbase logo" height="100"/gt;  lt;/IonColgt;  lt;StyledCol size="12"gt;  lt;spangt; Create a new account lt;/spangt;   lt;/StyledColgt;  lt;StyledSignUp size="12"gt;  lt;StyledButton onClick={loginClick}gt;  lt;spangt; Log in with Phone Number lt;/spangt;  lt;/StyledButtongt;  lt;/StyledSignUpgt;  lt;StyledSignUp size="12"gt;  lt;StyledButton onClick={loginClick}gt;  lt;spangt; Log in with Facebook lt;/spangt;  lt;/StyledButtongt;  lt;/StyledSignUpgt;  lt;/StyledRowgt;  lt;/StyledGridgt;  lt;/IonContentgt;  lt;/IonPagegt;  ) }