Javascript 基于布尔变量的条件路由_Javascript_Reactjs_Ionic Framework_Routes

Javascript 基于布尔变量的条件路由

javascript reactjs ionic-framework routes

Javascript 基于布尔变量的条件路由,javascript,reactjs,ionic-framework,routes,Javascript,Reactjs,Ionic Framework,Routes,我对这一行有疑问： <Route path="/" render={() => isReg ? <Registro />: <Home /> } /> isReg？：}/> 我得到的是： JSX元素类型“element | undefined”不是构造函数对于JSX元素。类型“未定义”不可分配给类型 “元素|空”。TS2605 我想做的是确认用户是否已注册isReg变量，如果已注册，则必须显示“/home”，否则显示“/Regi

我对这一行有疑问：

<Route path="/" render={() => isReg ? <Registro />: <Home /> } />

isReg？：}/>

我得到的是：

JSX元素类型“element | undefined”不是构造函数对于JSX元素。类型“未定义”不可分配给类型 “元素|空”。TS2605

我想做的是确认用户是否已注册isReg变量，如果已注册，则必须显示“/home”，否则显示“/Registro”

但我无法修复条件路由语句。我将非常感谢你的帮助。提前谢谢

const App: React.FC = () => {
  const [isReg, setIsReg] = useState(false);

  useEffect(() => {
    if(getItem("isRegistered2")==null){
    console.log(getItem("isRegistered2"));
    setIsReg(true);
  }
  else{
    setIsReg(false);
  }
}, []);

return(
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main" when="(min-width: 4096px)">
      <Menu />
  <IonRouterOutlet id="main">
  <Route path="/" render={() => isReg ? <Registro />: <Home /> } />
    <Route path="/registro" component={Registro} exact={true}></Route>
    <Route path="/ingresar" component={Ingresar} exact={true}></Route>
    <Route path="/MisServicios" component={MisServicios} exact={true}></Route>
    <Route path="/Favoritos" component={Favoritos} exact={true}></Route>
    <Route path="/HistorialServicios" component={HistorialServicios} exact={true}></Route>
    <Route path="/Completarinfo" component={Completarinfo} exact={true} />
    <Route path="/Login" component={Login} exact={true} />


    <Route path="/tab2" component={Tab2} exact={true} />



  </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>
</IonApp>

);
};

export default App;

const-App:React.FC=（）=>{
const[isReg，setIsReg]=useState（false）；
useffect（（）=>{
if（getItem（“isRegistered2”）==null）{
日志（getItem（“isRegistered2”）；
setIsReg（真）；
}
否则{
setIsReg（假）；
}
}, []);
返回(
isReg？：}/>
);
};
导出默认应用程序；

英格拉斯

我认为问题在于家庭部分。因为如果我把家换成另一个组件，我就没有问题了。我在家里看到的不同之处是它有一个模态

Home.tsx

const Home = () => {
  const [showModal, setShowModal] = useState({ isOpen: false });
  const [retVal, setRetVal] = useState(null);
  const [count, setCount] = useState(0);

  const [login, setLogin]=useState(0);

  const axios = require('axios');

  const data2 = getLocation();

  if(getItem("isRegistered")!=null){
    console.log(getItem("isRegistered"));
    setLogin(1);
  }
  else{
    setLogin(0);
  }

  data2.then((value)=>{
    
    console.log(url+value);
    axios.get(url+value).then((resp: { data: any; }) => {

      console.log(resp.data);
    });  
  
  })
  
  if(login===1){
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow id="header">
                <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
                <IonCol id="columna2" ><Busqueda /></IonCol>
                <IonCol id="columna3" size="2"> 
                  <IonChip  onClick={() => {  setShowModal({ isOpen: true});  setCount(0)}}id="user" >
                    <IonIcon icon={person} id="foto-usuario"/>
                  </IonChip>
                 </IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
        
        <IonContent className="ion-padding">
        <IonModal
            animated={true}
            isOpen={showModal.isOpen}
            onDidDismiss={() => setShowModal({ isOpen: false })}
          >
            <MyModal 
               tipo={count}
               onClose={(value: React.SetStateAction<null>) => {
                setShowModal({ isOpen: false });
                value ? setRetVal(value) : setRetVal(null);
              }} 
            />  
          </IonModal>

          <IonGrid>
          <IonRow>
          <IonCol>
            <div id="contenedor-prueba">
            <IonChip className="boton-generales"  onClick={() => {  setShowModal({ isOpen: true});  setCount(1)}}>
              <IonLabel ><small>Emergencias</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/sirena.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales"  onClick={() => {  setShowModal({ isOpen: true});  setCount(2)}}>
              <IonLabel><small>Categorías</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/servicio.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales"  onClick={() => {  setShowModal({ isOpen: true});  setCount(3)}}>
              <IonLabel><small>Programado</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/time.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          </IonRow>
          </IonGrid>

          <ExploreContainer  />
        </IonContent>
      </IonPage>
  );

  }
  
};


const MyModal: React.FC<{onClose: any; tipo: number;}> = ({ onClose, tipo }) => {
  
  if(tipo===0){
    return (
      <>
      <IonHeader>
        <IonToolbar>
        <IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver">  </IonIcon>

        </IonToolbar>
      </IonHeader>
      <IonContent>
        <div id="contenedor-central">
          <br></br>
          <IonButton href="/ingresar" id="botoningresoregistro">INGRESAR</IonButton>
          <IonButton href="/registro" id="botoningresoregistro">REGISTRARSE</IonButton>
        </div>
      </IonContent>
    </>
    );
  }
  if(tipo===1){
    return (
      <>
      <IonHeader>
        <IonToolbar>
        <IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver">  </IonIcon>

        </IonToolbar>
      </IonHeader>
      <IonContent>
        <div id="contenedor-central">
          <strong>Emergencias</strong>
        </div>
      </IonContent>
    </>
    );
  }
  if(tipo===2){
    return (
      <>
      <IonHeader>
        <IonToolbar>
        <IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver">  </IonIcon>

        </IonToolbar>
      </IonHeader>
      <IonContent>
        <div id="contenedor-central">
          <strong>Categorías</strong>
        </div>
      </IonContent>
    </>
    );
  }
  else{
    return (
      <>
      <IonHeader>
        <IonToolbar>
        <IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver">  </IonIcon>

        </IonToolbar>
      </IonHeader>
      <IonContent>
        <div id="contenedor-central">
          <strong>Programados</strong>
        </div>
      </IonContent>
    </>
    );
  }
 
};


class Modal extends Component{
  constructor(props: Readonly<{}>) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Se hizo click');
  }
  render() {
    return <button onClick={this.handleClick}>Clickéame</button>;
  }
}


class Busqueda extends Component{

  Buscar = () =>{
    var input=(document.getElementById("busqueda") as HTMLTextAreaElement).value;
  
    if(input==="hola"){
      console.log("hola perri");
    }
  }
   render(){
    return(<IonSearchbar type="text" placeholder="¿Qué servicios buscas?" onIonInput={this.Buscar} id="busqueda"></IonSearchbar>);
       }
    
  };

  export default Home;

const Home=（）=>{
const[showmodel，setshowmodel]=useState（{isOpen:false}）；
const[retVal，setRetVal]=useState（null）；
const[count，setCount]=useState（0）；
const[login，setLogin]=useState（0）；
const axios=require（'axios'）；
const data2=getLocation（）；
如果（getItem（“isRegistered”）！=null）{
日志（getItem（“isRegistered”）；
setLogin（1）；
}
否则{
setLogin（0）；
}
数据2.然后（（值）=>{
console.log（url+值）；
get（url+value）.then（（resp:{data:any；}）=>{
控制台日志（相应数据）；
});  
})
如果（登录===1）{
返回(
{setShowModal（{isOpen:true}）；setCount（0）}}id=“user”>
setShowModal（{isOpen:false}}
>
{
setShowModal（{isOpen:false}）；
值？setRetVal（值）：setRetVal（空）；
}} 
/>  
{setShowModal（{isOpen:true}）；setCount（1）}>
紧急情况
{setShowModal（{isOpen:true}）；setCount（2）}>
分类
{setShowModal（{isOpen:true}）；setCount（3）}>
程序设计
);
}
};
常量MyModal:React.FC=（{onClose，tipo}）=>{
如果（tipo==0）{
返回(
onClose（null）}slot=“start”id=“flecha volver”>



安格尔
注册人
);
}
如果（tipo==1）{
返回(
onClose（null）}slot=“start”id=“flecha volver”>
紧急情况
);
}
如果（tipo==2）{
返回(
onClose（null）}slot=“start”id=“flecha volver”>
类别
);
}
否则{
返回(
onClose（null）}slot=“start”id=“flecha volver”>
程序设计
);
}
};
类模态扩展组件{
构造函数（道具：只读）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
log（'Se hizo click'）；
}
render（）{
返回Clickéame；
}
}
类Busqueda扩展了组件{
公共汽车=（）=>{
var输入=（document.getElementById（“busqueda”）作为HTMLTextAreaElement）。值；
如果（输入==“hola”）{
console.log（“hola perri”）；
}
}
render（）{
return（）；
}
};
导出默认主页；

像这样使用它：

const [isReg, setIsReg] = useState();

{isReg != undefined && <Route path="/" render={() => isReg ? <Registro />: <Home/>} />

初始化未定义的状态，如下所示：

const [isReg, setIsReg] = useState();

{isReg != undefined && <Route path="/" render={() => isReg ? <Registro />: <Home/>} />

然后动态创建路由，如下所示：

const [isReg, setIsReg] = useState();

{isReg != undefined && <Route path="/" render={() => isReg ? <Registro />: <Home/>} />

{isReg！=未定义&isReg？：}/>

定义一个处理条件呈现的新组件。isReg状态不应位于App.js内

AppReg.js

const AppReg: React.FC = () => {
  const [isReg, setIsReg] = useState(null);

  useEffect(() => {
    if (getItem('isRegistered2') == null) {
      console.log(getItem('isRegistered2'));
      setIsReg(true);
    } else {
      setIsReg(false);
    }
  }, []);

  if (isReg == null) {
    return <Loader />;
  }

  if (isReg === true) {
    return <Registro />;
  } else {
    return <Home />;
  }
};

export default AppReg;

const AppReg:React.FC=（）=>{
const[isReg，setIsReg]=useState（null）；
useffect（（）=>{
if（getItem（'isRegistered2'）==null）{
log（getItem（'isRegistered2'）；
setIsReg（真）；
}否则{
setIsReg（假）；
}
}, []);
如果（isReg==null）{
返回；
}
如果（isReg==真）{
返回；
}否则{
返回；
}
};
出口违约处理；

App.js

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main" when="(min-width: 4096px)">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/" component={AppReg} />
            <Route path="/registro" component={Registro} exact={true}></Route>
            <Route path="/ingresar" component={Ingresar} exact={true}></Route>
            <Route path="/MisServicios" component={MisServicios} exact={true}></Route>
            <Route path="/Favoritos" component={Favoritos} exact={true}></Route>
            <Route path="/HistorialServicios" component={HistorialServicios} exact={true}></Route>
            <Route path="/Completarinfo" component={Completarinfo} exact={true} />
            <Route path="/Login" component={Login} exact={true} />

            <Route path="/tab2" component={Tab2} exact={true} />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

const-App:React.FC=（）=>{
返回(
);
};
导出默认应用程序；

更新：主组件需要在默认情况下返回null。

谢谢，但我仍然有at返回语句（在AppReg.tsx中，问题似乎出在主组件）：JSX元素类型“element | undefined”不是JSX元素的构造函数。类型“未定义”不可分配给类型“Element | null”。太奇怪了。您是否也实现了加载器组件？如果不是，请尝试在那里返回null以进行测试。返回主组件为=>返回为元素。否则，家将返回未定义，这似乎是问题所在。试着从家里返回null来测试东西。啊！只是看着