如何为 HOC 输入 props，它将包装反应路由器的 Route 组件答案

【问题标题】：How do I type the props for a HOC which will wrap react router's Route component如何为 HOC 输入 props，它将包装反应路由器的 Route 组件
【发布时间】：2020-03-11 20:33:39
【问题描述】：

我正在尝试创建一个PrivateRoute，它将包装来自react-router-dom 的Route 组件。在这个组件中，我想检查用户是否有令牌，并根据该令牌拒绝或授予对他们尝试导航到的屏幕的访问权限。问题是我很难用打字稿为这个组件输入道具。

这里是代码。

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

const ProtectedRoute = (props: RouteProps) => {
    return (
        <Route
            path={props.path}
            exact={props.exact}
            render={renderProps => {
                const token = localStorage.getItem("myToken");
                if (token) {
                    const Component = props.component;
                    return (
                        <Component {...renderProps} />
                    )
                }
            }}
        />
    );
};


export default ProtectedRoute;

这是我使用的地方。

import * as React from 'react';
import { ThemeProvider } from "styled-components";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import Loadable from "react-loadable";
import Loader from "components/Loader";
import ProtectedRoute from "components/PrivateRoute";

const Login = Loadable({
  loader: () => import("routes/Login"),
  loading: Loader,
})

const Home = Loadable({
  loader: () => import("routes/home"),
  loading: Loader,
})

const App: React.FC = () => {
  const theme = {

  };
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Switch>
          <Route path="/login" component={Login} />
          <ProtectedRoute path="/" exact component={Home} />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

问题是当我尝试使用来自Route 组件的渲染道具渲染传入组件时出现以下错误。

JSX 元素类型“组件”没有任何构造或调用签名.ts

有什么想法吗？

【问题讨论】：

你可以只使用props而不是props: RouteProps吗？
否，因为那样props 将隐含为任何。我也想让他们打字。
如果我没记错的话，这是别名的方式，而不是指定类型

标签： reactjs typescript react-router-dom

【解决方案1】：

我不确定它是否会涵盖您的全部用例，但您可以看看

我刚刚对你的ProtectedRoute做了一些修改

import React from "react";
import { Route } from "react-router-dom";

const ProtectedRoute = props => {
  return (
    <Route
      path={props.path}
      exact={props.exact}
      Component={renderProps => {
        const token = localStorage.getItem("myToken");
        if (token) {
          const Component = props.component;
          return <Component {...renderProps} />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

对于 props 的类型检查，你可以使用 prop-types

【讨论】：