Реализовать React-router PrivateRoute в проекте Typescript

Ошибка возникает из-за того, что PrivateRouteProps имеет обязательное свойство location, которое не предоставляется при использовании PrivateRoute в components/Routes.tsx. Я предполагаю, что это местоположение должно поступать от routeProps, который маршрутизатор автоматически передает функции render маршрута, как это было в исходном примере. Как только это будет исправлено, появится другая ошибка: components/Routes.tsx передает свойство paths, которое не объявлено в PrivateRouteProps. Поскольку PrivateRoute передает любую опору, о которой он не знает, в Route, PrivateRouteProps должен расширять RouteProps от react-router, чтобы PrivateRoute принимал все опоры, принятые Route.

Вот components/PrivateRoute.tsx после обоих исправлений:

import * as React from 'react';
import {
    Route,
    Redirect,
    RouteProps,
} from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
    // tslint:disable-next-line:no-any
    component: any;
    isSignedIn: boolean;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component: Component, isSignedIn, ...rest } = props;

    return (
        <Route
            {...rest}
            render = {(routeProps) =>
                isSignedIn ? (
                    <Component {...routeProps} />
                ) : (
                        <Redirect
                            to = {{
                                pathname: '/signin',
                                state: { from: routeProps.location }
                            }}
                        />
                    )
            }
        />
    );
};

export default PrivateRoute;

Я нашел Мэтт ответ очень полезным, но мне нужно, чтобы он работал как с children, так и с component, поэтому изменил его следующим образом:

import * as React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { fakeAuth } from '../api/Auth';

interface PrivateRouteProps extends RouteProps {
  // tslint:disable-next-line:no-any
  component?: any;
  // tslint:disable-next-line:no-any
  children?: any;
}

const PrivateRoute = (props: PrivateRouteProps) => {
  const { component: Component, children, ...rest } = props;

  return (
    <Route
      {...rest}
      render = {routeProps =>
        fakeAuth.isAuthenticated ? (
          Component ? (
            <Component {...routeProps} />
          ) : (
            children
          )
        ) : (
          <Redirect
            to = {{
              pathname: '/signin',
              state: { from: routeProps.location },
            }}
          />
        )
      }
    />
  );
};

export default PrivateRoute;

Примечание. Это происходит с использованием fakeAuth как оригинального обучающая статья, а не с сокращением isSignedIn пользователя1283776, но вы поняли идею.

Текущие ответы работают, но я хотел бы опубликовать свое решение, так как я думаю, что у него есть несколько преимуществ:

• Не заменять свойство component типом any.
• Использование метод рендеринга из библиотеки для поддержки как компонента <Route>, так и дочерних реквизитов - без повторной реализации уже существующей логики / кода фреймворка.
• Использование Recipe: Static Typing из официальной документации react-redux

Пример:

import * as React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import {
    Redirect,
    Route,
    RouteProps,
} from 'react-router-dom';
import { AppState } from '../store';

const mapState = (state: AppState) => ({
  loggedIn: state.system.loggedIn,
});

const connector = connect(
  mapState,
  { }
);

type PropsFromRedux = ConnectedProps<typeof connector>;

type Props = PropsFromRedux & RouteProps & {

};

const PrivateRoute: React.FC<Props> = props => {
    const { loggedIn, ...rest } = props;

    return ( !loggedIn ? <Redirect to = "/login/" /> :
      <Route {...rest} />
    );
};

export default connector(PrivateRoute);

Я использую тип «React.ReactNode» для моих дочерних компонентов вместо каких-либо.