如何解决 eslint 错误：自定义路由组件中的“禁止传播道具”？

Question

How can I resolve the eslint error: "prop spreading is forbidden" in a custom route component?

This error occurs on lines 3 and 6 below:

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route
    {...rest}
    render={(props) => (
        localStorage.getItem('user') ?
          <Component {...props} /> :
          <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  )}
  />
);

Answer 1

For ESLint is important which type of comment do you use, the legit one is:

/* eslint-disable react/jsx-props-no-spreading */

Answer 2

ES lint discourages the use of prop spreading so that no unwanted/unintended props are being passed to the component. More details here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

To disable it for the particular file, you can put: /* eslint-disable react/jsx-props-no-spreading */ at the top line in your component file. For disabling it for all files, try this: Disable in EsLint "react / jsx-props-no-spreading" error in Reactjs

Edited comments as per answer below

Answer 3

If you are using vscode and have eslint plugin installed then simply hover over the error it will open the dialog as shown in image -> quick fix -> disable for this line.

Doing this will add proper lint comment automatically.

Answer 4

You can use this one just to comment out the below line:-

/* eslint-disable-next-line react/jsx-props-no-spreading */