React Route - 不能分配给“render”，因为它不是变量答案

【问题标题】：React Route - cannot assign to "render" because it is not a variableReact Route - 不能分配给“render”，因为它不是变量
【发布时间】：2020-11-22 13:12:59
【问题描述】：

这是我正在尝试制作的 PrivateRoute

function PrivateRoute({ component: Component, ...rest }) {
    return <Route {...rest} render={(props) => <Component {...props} />} />
}

在Route 和{...rest}，eslint 抛出Parsing error: > expected。

在render=，我得到Cannot assign to 'render' because it is not a variable，对于它之后的每个其他标识符，我得到unreachable code。

我错过了什么？

【问题讨论】：

使用打字稿验证您的代码。我对打字稿了解不多，有人可以帮助你。
您能否检查您的组件文件名是否以*.tsx 结尾，而不是*.ts？
感谢@AjeetShah，这是一次绝杀！

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

【解决方案1】：

正如@AjeetShah 在 cmets 中指出的那样，问题出在文件扩展名上。

文件扩展名是.ts，而不是.tsx。

希望你不要犯这么傻的错误！

【讨论】：

【解决方案2】：

首先，所有 React 组件名称必须以 capital 字母开头。如果您以小写字母开头的组件名称，它将被视为像<div> 或<span> 这样的内置元素。这是因为 JSX 的工作方式。

尝试在这个文件中禁用 eslint，因为我认为 eslint 被混淆了。

在文件顶部添加以下评论。

/* eslint-disable */

【讨论】：

你是认真的吗？只是禁用 linting 整个文件，因为可能存在其他问题？
1.您的代码 2 中没有任何问题。也许您在代码中写了一个坏字符，这破坏了您的代码（如果您同意这个想法，我建议您从头开始编写该文件的代码）。所以，如果你确定你没有写任何坏字符，那么最好的方法是禁用 eslint，因为我在我的项目中使用了你的代码，一切正常，没有 eslint 错误。