TypeScript 中的 React PrivateRoute 功能组件

Question

I get the following error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<RouteProps>): Route<RouteProps>', gave the following error.
    Type 'Element' is not assignable to type '(props: RouteComponentProps<any, StaticContext, PoorMansUnknown>) => ReactNode'.
      Type 'Element' provides no match for the signature '(props: RouteComponentProps<any, StaticContext, PoorMansUnknown>): ReactNode'.
  Overload 2 of 2, '(props: RouteProps, context?: any): Route<RouteProps>', gave the following error.
    Type 'Element' is not assignable to type '(props: RouteComponentProps<any, StaticContext, PoorMansUnknown>) => ReactNode'.  TS2769

    32 | 
    33 |   if (authStatus === AuthStatus.SomeRole) {
  > 34 |     return <Route exact path="/someUrl/" render={<Redirect to="/someUrl" />} />;
       |                                        ^
    35 |   }

Interface:

interface IPrivateRouteProps {
  component: React.FC;
  path: string;
  exact?: boolean;
}

Type

type PrivateRouteProps = RouteProps &
  IPrivateRouteProps &
  IAuthenticationState &
  typeof AuthenticationActionCreators.actionCreators;

Component:

const PrivateRoute: React.FC<PrivateRouteProps> = (props: PrivateRouteProps) => {
  const { authStatus } = props;
  ...
  if (authStatus === AuthStatus.SomeRole) {
    return <Route exact path="/someUrl/" render={<Redirect to="/someUrl" />} />;
  }
  ...
};

Can you explain to me where this error comes from? If I remove the render and replace the component in <Route component={<SomeComponent />} /> , everything works, only the component does not render itself.

Answer 1

If you go through react router documentation:

render: func

render requires function. So in your case it should be like this:

if (authStatus === AuthStatus.SomeRole) {
    return <Route exact path="/someUrl/" render={(routeProps) => <Redirect to="/someUrl" />} />;
  }

If you go little more depth:

Warning : <Route component> takes precedence over <Route render> so don't use both in the same.

Hope you got the answer. More you can read here