如何在 React 功能组件中 return 不同的页面

Question

我正在创建一个 React 应用程序，当我的应用程序启动时，我想知道用户是否已登录以将他发送到主页。当我的应用启动“/”路由时加载此页面

import React from 'react';
import { Redirect } from 'react-router';
import { LocalStorageService } from "../services/localData-service";


const HomeOrLogin : React.FC = () => {
    /*If User is logged then, redirect to home, if not redirect to slides tutorial*/ 
    const storageService = new LocalStorageService();
    // Check if exits jwt in the phone
    storageService.getItem("jwt")
        .then((token )=>{
            /* If exists the jwt in the phone the user is logged */ 
            if(token){
                return <Redirect to="/Home" /> 
            }else{
                return <Redirect to="/slides" />
            }               
        })
        .catch((err)=>{
                console.log(err);
        })
};

export default HomeOrLogin;

但是它告诉我组件有错误

Type '() => void' is not assignable to type 'FC<{}>'.
  Type 'void' is not assignable to type 'ReactElement<any, any> | null'.

Answer 1

您是否考虑过在 componentDidMount 中执行异步请求，然后在 return 一个或另一个屏幕中执行？

import React, { useState, useEffect } from 'react';

const HomeOrLogin : React.FC = () => {
    const [ redirect, setRedirect ] = useState(null);
    /*If User is logged then, redirect to home, if not redirect to slides tutorial*/ 

    useEffect(() => {
        const storageService = new LocalStorageService();
            // Check if exits jwt in the phone
            storageService.getItem("jwt")
                .then((token )=>{
                /* If exists the jwt in the phone the user is logged */ 
                    if(token){
                        setRedirect('/Home');
                    }              
                })
                .catch((err)=>{
                    console.log(err);
                })
    }, []);

    if (redirect) 
        return <Redirect to={redirect} />
    }
    return (
        <Redirect to="/slides" />
    )

 };

这样，如果有令牌，您将被重定向到主页，否则将被重定向到 /slides。

如何在 React 功能组件中 return 不同的页面

How to return diferent pages in React functional component

reactjs

ionic-framework

react-hooks

react-functional-component