React / NextJS：使用功能组件实现路由保护的更好方法

如何解决React / NextJS：使用功能组件实现路由保护的更好方法

我想为我的受保护页面实现路由防护，我的整个应用程序都使用功能组件。

我知道在ReactJS / NextJS中有不同的技术可以实现这一点：

• 使用HOC
• 在受保护的组件内使用useEffect（）
• 或使用返回受保护组件的功能组件

我选择了最后一个选项，并创建了一个包装器组件，如下所示：

const PrivateComponent = (Component: FC<any> | SFC<any>) => {
  return () => {
    const { isLoggedin } = useSelector(
      ({ user: { currentUser } }: IRootState) => currentUser,);

    useEffect(() => {
      if (!isLoggedin) Router.replace(HOME_PATH);
      // tslint:disable-next-line: align
    },[isLoggedin]);

    return <Component />;
  };
};

我可以按如下方式使用它：

const MyComponent: React.SFC<{}> = () => {
...
...
...
}

export default PrivateComponent(MyComponent);

在这种情况下，它可以正常工作。

问题

要包装的组件或页面收到一些props

时，会发生此问题

在这种情况下：

const MyComponentWithProps: React.SFC<{editFormState: IUnkNownObject; slug: string | string[];}> = ({editFormState,slug}) => {
...
...
...
}

export default PrivateComponent(MyComponentWithProps);

尝试重用此组件MyComponentWithProps时出现此错误：

Type '{ editFormState: IUnkNownObject; slug: string | string[]; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'editFormState' does not exist on type 'IntrinsicAttributes'