React/Typescript 条件路由 - 从 React Router Dom v5 更新到 v6

【问题标题】：React/Typescript conditional routing - Updating from React Router Dom v5 to v6React/Typescript 条件路由 - 从 React Router Dom v5 更新到 v6
【发布时间】：2022-06-17 01:04:36
【问题描述】：

我是 Typescript 的新手，我正在将我们应用的 react 路由器版本从 v5 更新到 v6。我不知道如何更新这个条件路由包装器：

// v5
import React from "react";
import {
  Redirect,
  RedirectProps,
  Route,
  RouteComponentProps,
  RouteProps,
} from "react-router-dom";

export type ConditionalRouteProps = React.FC<
  RouteProps &
    Partial<RedirectProps> & {
      condition?: boolean;
    }
>;

const ConditionalRoute: ConditionalRouteProps = ({
  component: Component,
  condition = false,
  children,
  ...rest
}) => {
  const toRender = (props: RouteComponentProps): React.ReactElement | null => {
    if (!condition) return <Redirect to={REDIRECT_DESTINATION} />;
    if (Component) return <Component {...props} />;
    return <>{children}</>;
  };

  return <Route {...rest} render={toRender} />;
};

export { ConditionalRoute };

我知道渲染方法和 Redirect 组件已报废，这是我迄今为止所做的（WIP）：

//v6
import React from "react";
import { Navigate, NavigateProps, Route, RouteProps } from "react-router-dom";

export type ConditionalRouteProps = React.FC<
  RouteProps &
    Partial<NavigateProps> & {
      condition?: boolean;
    }
>;

const ConditionalRoute: ConditionalRouteProps = ({
  element: Element,
  condition = false,
  children,
  ...rest
}) => {
  return (
    <Route {...rest}>
      {!condition ? <Navigate to={REDIRECT_DESTINATION} /> : Element ? <Element /> : <>{children}</>/>}
    </Route>
  );
};

export { ConditionalRoute };

这是我在<Element /> 上遇到的错误： JSX 元素类型 'Element' 没有任何构造或调用 signatures.ts(2604)

【问题讨论】：

• 您可以发布您要渲染的元素吗？

标签： reactjs typescript react-router-dom