Tengo un problema al solucionar el error de EsLint
ESLint: Must use destructuring props assignment (react/destructuring-assignment) .
El linter requiere desestructurar los accesorios, pero si hago eso, obtengo un parámetro indefinido.
En mi código, intento obtener un parámetro de una URL. ¿Qué estoy haciendo mal?
Aquí indico que parámetros debe tener la URL:
<Route path="/confirm-register/:userName?" component={ConfirmRegistrationPage} /> Mi código original, funciona como se esperaba, el parámetro nombre de userName obtiene un valor de cadena:
strong textconst ConfirmRegistrationPage = (props) => { const { userName } = props.match.params; return ( <> <h1>Congratulations, {userName}! </h1> </> ); };Lo que he probado. En este caso, el nombre de usuario no está definido:
strong textconst ConfirmRegistrationPage = ({ userName }) => { return ( <> <h1>Congratulations, { userName }! </h1> </> ); };configuración de eslint:
{ "env": { "browser": true, "commonjs": true, "es6": true }, "extends": [ "plugin:react/recommended", "plugin:react/jsx-runtime", "eslint-config-airbnb" ], "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true }, "ecmaVersion": 11 }, "plugins": [ "react" ], "rules": { "react/jsx-filename-extension" : "off", "react/prop-types": "off", "import/no-named-as-default": "off", "import/no-named-as-default-member": "off", "react/jsx-one-expression-per-line": "off" } }Edite la desestructuración de accesorios. Yo elegiría la primera variante. Es más legible.
// first variant strong textconst ConfirmRegistrationPage = ({ match }) => { const { userName } = match.params return ( <> <h1>Congratulations, { userName }! </h1> </> ); }; // second variant strong textconst ConfirmRegistrationPage = ({ match: { params: { userName } } }) => { return ( <> <h1>Congratulations, { userName }! </h1> </> ); }; // third variant strong textconst ConfirmRegistrationPage = ({ match: { params } }) => { const { userName } = params return ( <> <h1>Congratulations, { userName }! </h1> </> ); };