个人中心
gpt4 book ai didi

React typescript error Parsing error: '>' expected(REACT打字脚本错误分析错误：‘>’预期)

翻译 作者：bug小助手 更新时间：2023-10-26 22:23:43 26 4
gpt4 key购买 nike



I am migrating js to ts and have an error with my modified code:

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


Line 26:8: Parsing error: '>' expected

第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}/>
    }
    />
  );
}

If someone sees the problem, that would be kind :). Thanks!

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



Solution


1/ File needs to have tsx extension

1/文件需要具有TSX扩展名


2/ syntax was also wrong in the tsx syntax. I changed to this and now it's ok:

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}/>
        }
    />
  );
}

Now I have another issue with binding element 'C', but it's another story.

现在，关于绑定元素‘C’，我有了另一个问题，但这是另一个故事。


Thanks everyone!

谢谢大家！


更多回答

This is a *.tsx formatted file. Probably it's sufficient to change the file extension.

这是一个*.tsx格式的文件。更改文件扩展名可能就足够了。

@Andreas_D That's what I did. Same error.

@Andreas_D这就是我所做的。同样的错误。

@KevinB You mean arount {...rest}? Not working.

@凯文B你的意思是在……休息}？不起作用。

No, i meant the arrow function. then realized it's an entirely different line. but i still think it's in some way relevant to the problem

不，我是说箭头功能。然后意识到这是一条完全不同的路线。但我仍然认为这在某种程度上与问题有关

@Andreas_D yes there was an isssue with the syntax but just by changing spacing and next line, it got fixed. Don't know the exact syntax issue though. Thx anyway.

@Andreas_D是的，语法有问题，但只需更改空格和下一行，它就被修复了。不过，我不知道确切的语法问题。不管怎么说，谢谢你。

优秀答案推荐

Change the file extension from .ts to .tsx.

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



Just take note: when returning react-dom, always use TSX otherwise TS

只需注意：当返回反应域时，始终使用TSX，否则使用TS



extension must be: .TSX NOT .ts

扩展名必须为：.TSX而不是.TS


if the file extension is already .tsx, then you need to Restart your app, cause in Cache memory, the extension is still .ts

如果文件扩展名已为.tsx，则需要重新启动应用程序，因为在缓存中，扩展名仍为.ts


just restart or rebuild the app.

只需重新启动或重新构建应用程序即可。


if it is: Create React App, then do this in terminal:

如果是：创建Reaction App，那么在终端中这样做：



  • ctrl + c

  • npm start


should be fixed now

现在应该修好了


更多回答

ok I changed to tsx and changed a bit the spacing around the tsx returned and it worked.

好的，我改成了TSX，并且稍微改变了一下TSX周围的间距，然后它就起作用了。

26 4 0
文章推荐： How do I stop animations in a list from cancelling out one another in unity?(如何阻止列表中的动画相互抵消？)
文章推荐： Python: Find the longest word in a string(Python：查找字符串中最长的单词)
文章推荐： Display all elements align in separeted lines(显示以分隔线对齐的所有元素)
文章推荐： How can i send notifications in a PWA?(如何在PWA中发送通知？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com