有条件地返回 react-router 路由的 TypeScript 函数

【问题标题】：TypeScript function that conditionally returns a react-router route有条件地返回 react-router 路由的 TypeScript 函数
【发布时间】：2020-02-15 18:19:02
【问题描述】：

我有一个 TypeScript 函数，当调用它时，会根据提供的参数有条件地返回 react-router-dom 路由。但是，当我声明(Route | null) 的返回类型时，我收到以下错误：

TS2740：类型“元素”缺少类型中的以下属性 'Route'：上下文、setState、forceUpdate、render 和 2 更多。

我是否没有正确声明此函数的返回类型，如果是，应该是什么？我也试过(Route<RouteProps> | null)，但这似乎并没有解决问题。谢谢。

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

const SampleComponent: React.FC = () => <h1>hello world</h1>;

export const getRoute = (returnRoute: boolean): (Route | null) => {
  if (returnRoute) {
    return (
      <Route
        component={SampleComponent}
        exact
        path="/samplePath"
      />
    );
  }
  return null;
};

【问题讨论】：

标签： reactjs typescript react-router react-router-dom

【解决方案1】：

如果您查看Route..的签名。

export class Route<T extends RouteProps = RouteProps> extends React.Component<T, any> { }

你会发现它只是一个类。在您的回报中，您是说您正在返回该类的一个实例（即new Route(props)）或null，而不是该类的一个组件（ReactNode）。这就像你有一个返回React.Component的函数一样的想法

React.ReactNode 基本上是一组 React 组件的有效返回值：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

所以要回答您的问题，您可以将(Route | null) 替换为React.ReactNode。

【讨论】：