reactjs - React Route - cannot assign to "render" because it is not a variable

Question

Here's a PrivateRoute I'm trying to make

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

At Route and {...rest}, eslint throws Parsing error: > expected.

At render=, I get Cannot assign to 'render' because it is not a variable and for every other identifier after it, I get unreachable code.

What am I missing?

标签： reactjsreact-routerreact-router-dom

Answer 1

First and foremost, All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a <div> or a <span>. This is because of the way JSX works.

Try to disable eslint in this file because I think eslint has been confused.

Add the below comment at top of your file.

/* eslint-disable */