Блог

Я пытаюсь интегрировать redux-auth-оболочку в проект React на основе машинописи. Тем не менее, я получаю сообщение об ошибке, когда пытаюсь использовать компонент, завернутый в аутентификацию, в любом месте. Я думал, что реквизит, связанный с аутентификацией, будет введен специальной аутентификацией, но он просит меня предоставить их.

Ошибка

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

Ошибка возникает в моем файле маршрутов, когда я пытаюсь использовать компонент SubServiceOverview, который обернут с помощью HOC. Файлы приведены ниже.

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] amp;amp; state[REDUCER_NAME]["authenticated"];

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

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

Вспомогательный просмотр.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);
 

Ошибка выводится из этого файла. Если я передам вспомогательный просмотр в компоненте prop, ошибка исчезнет.

Маршруты.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;