[ERROR]JSX element type 'Route' is not a constructor function for JSX elements

@UCN wrote:

I have installed ionic react with the default tabs, I did not add any package. When I launch the app I receive this error:

The types returned by 'render()' are incompatible between these types.
[react-scripts]     Type 'ReactNode' is not assignable to type 'false | Element | null'.
[react-scripts]       Type 'undefined' is not assignable to type 'false | Element | null'.  TS2605
[react-scripts]     41 |         <IonRouterOutlet>
[react-scripts]     42 |         <React.Fragment>
[react-scripts]   > 43 |           <Route path="/tab1" component={Tab1} exact={true} />
[react-scripts]        |           ^
[react-scripts]     44 |           <Route path="/tab2" component={Tab2} exact={true} />
[react-scripts]     45 |           <Route path="/tab3" component={Tab3} />
[react-scripts]     45 |           <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />

In VS Route and Redirect is highlighting as if there is syntax error, and when hovered it shows this:

(alias) class Route<T extends RouteProps = RouteProps>
import Route
'Route' cannot be used as a JSX component.
  Its instance type 'Route<{ path: "/tab1"; component: FC<{}>; exact: true; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactNode' is not assignable to type 'false | Element | null'.
        Type 'undefined' is not assignable to type 'false | Element | null'.ts(2786)

If I comment out this:

        <Route path="/tab1" component={Tab1} exact={true} />
         <Route path="/tab2" component={Tab2} exact={true} />
         <Route path="/tab3" component={Tab3} />
         <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />

The app launchs. Perhaps the problem is with the Route

I have opened an Issue on github (https://github.com/ionic-team/ionic/issues/21109) , but I was advised to get help here. Any help?

Posts: 1

Participants: 1

Read full topic