React typescript error Parsing error: '>' expected

Question

我正在将js迁移到ts，我修改的代码有错误：

第 26:8 行：解析错误：预期为“>”

import React from "react";
import { Route, Redirect, RouteProps } from "react-router-dom";
import {render} from "react-dom"
import {AppProps} from "../App"

function querystring(name: string, url = window.location.href) {
  name = name.replace(/[[]]/g, "\$&");

  const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i");
  const results = regex.exec(url);

  if (!results) {
    return null;
  }
  if (!results[2]) {
    return "";
  }

  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
                                                 RouteProps & {appProps: AppProps}) {
  const redirect = querystring("redirect");
  return (
    <Route
        {...rest} // the issue is here
        render={ props => !appProps.isAuthenticated ?
            <C {...props} {...appProps} />
          :
            <Redirect to={redirect === "" || redirect === null ? "/" : redirect}/>
    }
    />
  );
}

如果有人看到了问题，那就太好了:)。谢谢！

解决方案

1/ 文件需要有 tsx 扩展名

2/ tsx 语法中的语法也是错误的。我改成了这个，现在可以了:

export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
                                                 RouteProps & {appProps: AppProps}) {
  const redirect = querystring("redirect");
  return (
    <Route {...rest}
        render={ props => !appProps.isAuthenticated ?
            <C {...props} {...appProps} />
          :
            <Redirect to={redirect === "" || redirect === null ? "/" : redirect}/>
        }
    />
  );
}

现在我有另一个关于绑定元素的问题 'C'，但这是另一回事了。

谢谢大家！

Answer 1

将文件扩展名从 .ts 更改为 .tsx。

Answer 2

请注意：返回 react-dom 时，始终使用 TSX，否则使用 TS

React typescript error Parsing error: '>' expected

React typescript error Parsing error: '>' expected

typescript

reactjs

react-tsx

解决方案