React JS routing - App function - Route to /home

Depending on whether the user is registered or not, the registration or home must be shown in the url “/”

I get an error at the line:

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

What could be the problem?

No overload matches this call. Overload 1 of 2, ‘(props: Readonly): Route’, gave the following error. Type ‘() => JSX.Element | undefined’ is not assignable to type ‘ComponentClass<any, any> | FunctionComponent | ComponentClass<RouteComponentProps<any, StaticContext, unknown>, any> | FunctionComponent<…> | undefined’. Type ‘() => JSX.Element | undefined’ is not assignable to type ‘FunctionComponent’. Type ‘Element | undefined’ is not assignable to type ‘ReactElement<any, any> | null’. Type ‘undefined’ is not assignable to type ‘ReactElement<any, any> | null’. Overload 2 of 2, ‘(props: RouteProps, context?: any): Route’, gave the following error. Type ‘() => JSX.Element | undefined’ is not assignable to type ‘ComponentClass<any, any> | FunctionComponent | ComponentClass<RouteComponentProps<any, StaticContext, unknown>, any> | FunctionComponent<…> | undefined’. Type ‘() => JSX.Element | undefined’ is not assignable to type ‘FunctionComponent’.ts(2769) index.d.ts(88, 5): The expected type comes from property ‘component’ which is declared here on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<…>’ index.d.ts(88, 5): The expected type comes from property ‘component’ which is declared here on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<…>’

This is the code:

const App: React.FC = () => {
    
      const [isReg, setIsReg] = useState(false);
    
      useEffect(() => {
        if(getItem("isRegistered")==null){
        console.log(getItem("isRegistered"));
        setIsReg(true);
      }
      else{
        setIsReg(false);
      }
    }, []);
    
      if(isReg){
        return (
          <IonApp>
            <IonReactRouter>
            <IonSplitPane contentId="main" when="(min-width: 4096px)">
                  <Menu />
              <IonRouterOutlet id="main">
              <Route path="/" component= {Registro } exact={true}/>
    
              </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          </IonApp>
          );
      }
      else{
        return (
          <IonApp>
            <IonReactRouter>
            <IonSplitPane contentId="main" when="(min-width: 4096px)">
                  <Menu />
              <IonRouterOutlet id="main">
                <Route path="/" component= {Home} exact={true}/>
    
              </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          </IonApp>
          );
      }
      
    };

Try this:

<Route path="/" render={() => <Redirect to="/Home" />} exact={true} />
1 Like

Thanks @Larusso

the problem is that the page is blank. It shows nothing. Is it possible that it is because of the if (isReg) conditional?

Could it be because there are 2 IonApp?
The problem seems to lie in return, the App does not return anything

you’ll install React Router into your base project. In this project, you are going to make a small website about marine mammals. Each mammal will need a separate component that you’ll render with the router. After installing the library, you’ll create a series of components for each mammal. By the end of this step, you’ll have a foundation for rendering React JS Certification different mammals based on route.

To start, install the React Router package