How to solve prop spreading is forbidden in custom route component?

Almaz Kaliev picture Almaz Kaliev · Nov 6, 2019 · Viewed 12.5k times · Source

How to solve prop spreading is forbidden in custom route component?

eslint: prop spreading is forbidden on line 3 and 6

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

Answer

Souvik Ghosh picture Souvik Ghosh · Nov 6, 2019

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 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