1

我正在尝试将redux-auth-wrapper集成到基于打字稿的 React 项目中。但是，当我尝试在任何地方使用 auth HOC 包装的组件时出现错误。我认为身份验证相关的道具将由身份验证 HOC 注入，但它要求我提供它们。

错误

Type '{}' is missing the following properties from type 'Readonly<Record<string,
unknown> & InjectedAuthRouterProps<(...args: any[]) => Action>>': redirect,
redirectPath, isAuthenticated, isAuthenticating

当我尝试使用使用 HOC 包装的 SubServiceOverview 组件时，错误发生在我的 Routes 文件中。文件如下。

reduxAuth.ts

import { routerActions } from "connected-react-router";
import { AuthWrapperDecorator } from "redux-auth-wrapper";
import {
  connectedRouterRedirect,
  InjectedAuthRouterProps
} from "redux-auth-wrapper/history4/redirect";

import { RootState } from "state/configureStore";
import { REDUCER_NAME } from "state/user/constants";

const authenticatedSelector = (state: RootState) =>
  state[REDUCER_NAME] && state[REDUCER_NAME]["authenticated"];

export const makeUserIsAuthenticated = <
  OwnProps = Record<string, unknown>
>(): AuthWrapperDecorator<OwnProps & InjectedAuthRouterProps> =>
  connectedRouterRedirect<OwnProps, RootState>({
    redirectPath: "/login",
    authenticatedSelector,
    wrapperDisplayName: "UserIsAuthenticated",
    redirectAction: routerActions.replace
  });

export const userIsAuthenticated =
  makeUserIsAuthenticated<Record<string, unknown>>();

SubServiceOverview.tsx

import React from "react";
import { Link } from "react-router-dom";
import { userIsAuthenticated } from "libs/reduxAuth";
import services from "routes/services";

const ServiceOverview: React.FC = () => {
  return (
    <div>
      <ul>
        {services.map(service => (
          <li key={service.name}>
            <Link to={`/services/${service.name}`}>{service.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default userIsAuthenticated(ServiceOverview);

从此文件中引发错误。如果我在组件道具中传递 SubServiceOverview，那么错误就会消失。

路线.tsx

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { Login } from "containers";
import ServiceOverview from "containers/views/ServiceOverview";
import SubServiceOverview from "containers/views/SubServiceOverview";

const Routes: React.FC = () => {
  return (
    <>
      <Route exact path="/">
        <Redirect to="/services" />
      </Route>
      <Route component={Login} path="/login" /> //Login is also wrapped but doesn't throw error
      <Route exact component={ServiceOverview} path="/services" />
      <Route path="/services/:subService">
        <SubServiceOverview /> //this is the line that shows the error
      </Route>
    </>
  );
};

export default Routes;
4

0 回答 0