Question

我需要为路由组件制作一个isLoggedIn中间件，并且这样做，我正在使用AuthContext并在私有路由上添加一个道具：isPrivate。但是，当我尝试接收此道具时，出现上述错误。

我知道我可以创建一个界面并设置一个isPrivate: any，但是我在问是否有“正确”的方法来实现这一目标。

我怎么对TypeScript说有一个叫做isPrivate的道具，并且没有定义？

isLoggedIn：

const isLoggedIn: React.FC = ({ isPrivate, ...rest }) => {
  const { authenticated } = useContext(AuthContext);

  if (isPrivate && !authenticated) return <Redirect to="/login" />;

  return <Route {...rest} />;
};

路线：

<Route isPrivate exact path="/users" component={Users} />

Answer 1

当您在组件上声明prop而不定义它时，默认值为boolean：true，例如：

<CustomRoute isPrivate exact path="/users" component={Users} />

isPrivate的类型为“ true”，因此您可以在界面中设置

interface ICustomRoute extends RouteProps {
  isPrivate: boolean
}

ps：您不需要创建接口，可以简单地将类型参数添加为类型，例如：

functional-comonent: React.FC<{prop: type, ...rest}> {}

打字稿|类型“ {children ?: ReactNode}”上不存在属性“ isPrivate”

1 个答案: