web-dev-qa-db-ja.com

React TypeScriptエラー解析エラー： '>'が予想される

私は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拡張子が必要です

TSX構文では2 /構文も間違っていました。私はこれに変更されました、そして今それは大丈夫です：

_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'の別の問題がありますが、それは別の物語です。

みんな、ありがとう！

reactjstypescriptreact-tsx
6
unludo

ファイル拡張子を.tsから.tsxに変更します。

4
Hassaan Tauqir

注意：React-DOMを返すときは、必ずTSXを使用してくださいTSを使用してください。

0
Kuya A