Question

我收到以下错误：

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 IPrivateRouteProps {
  component: React.FC;
  path: string;
  exact?: boolean;
}

类型

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

组件：

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

您能告诉我这个错误的来源吗？如果我删除了render中的component并替换了<Route component={<SomeComponent />} />中的import tensorflow as tf from scipy.io import loadmat import numpy as np from tensorflow.keras.layers import BatchNormalization import matplotlib.pyplot as plt from tensorflow.keras.models import Sequential from tensorflow.keras.layers import Dense, Activation, Dropout from tensorflow.keras.layers import Conv2D, MaxPool2D, Flatten reshape_channel_train = loadmat('reshape_channel_train') reshape_channel_test = loadmat('reshape_channel_test.mat') reshape_label_train = loadmat('reshape_label_train') reshape_label_test = loadmat('reshape_label_test') X_train = reshape_channel_train['store_train'] X_test = reshape_channel_test['store_test'] X_train = np.expand_dims(X_train,axis = 0) X_test = np.expand_dims(X_test, axis = 0) Y_train = reshape_label_train['label_train'] Y_test = reshape_label_test['label_test'] classifier = Sequential() classifier.add(Conv2D(8, kernel_size=(3,3) , input_shape=(3, 12, 1), padding="same")) classifier.add(BatchNormalization()) classifier.add(Activation('relu')) classifier.add(Conv2D(8, kernel_size=(3,3), input_shape=(3, 12, 1), padding="same")) classifier.add(BatchNormalization()) classifier.add(Activation('relu')) classifier.add(Flatten()) classifier.add(Dense(8, activation='relu')) classifier.add(Dense(6, activation='sigmoid')) classifier.compile(optimizer='nadam', loss='binary_crossentropy', metrics=['accuracy']) history = classifier.fit(X_train, Y_train, batch_size = 32, epochs=100, validation_data=(X_test, Y_test), verbose=2)，则一切正常，只有组件无法呈现自身。

Answer 1

如果您查看React Router文档：

渲染：功能

渲染需要功能。因此，在您的情况下，应该是这样的：

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

如果您再深入一点：

警告：<Route component>的优先级高于<Route render>，因此请不要将两者同时使用。

希望您得到了答案。您可以阅读更多here

在TypeScript中反应PrivateRoute功能组件

1 个答案: