React Route - нельзя присвоить рендерингу, потому что это не переменная

Question

Вот 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.

Что мне не хватает?

Answer 1

Как @AjeetShah указал в комментариях, проблема была в расширении файла.

Расширение файла было .ts вместо .tsx.

Надеюсь, вы этого не сделаете ошиблись это глупо!

Answer 2

Прежде всего, все имена компонентов React должны начинаться с буквы capital. Если вы начинаете имя компонента со строчной буквы, оно будет рассматриваться как встроенный элемент, например <div> или <span>. Это связано с тем, как работает JSX.

Попробуйте отключить eslint в этом файле, потому что я думаю, что eslint был сбит с толку.

Добавьте следующий комментарий вверху вашего файла.

/* eslint-disable */