El error
Este es el error que se muestra en el navegador sobre la página web.
Compiled with problems:X ERROR src\components\SignIn.js Line 5:21: React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks Search for the keywords to learn more about each error. Iniciar sesión.js
La parte de mi código que usa el gancho React useRef.
import React, { useRef } from 'react' import { Card, Button, Form } from 'react-bootstrap' export default function signin() { const userRef = useRef() return ( <> <Card> <Card.Body> <h2 className='text-center mb-4'>Magnet</h2> <Form> <Form.Group id="username"> <Form.Label>Username</Form.Label> <Form.Control type='text' ref={userRef} required /> </Form.Group> </Form> </Card.Body> </Card> </> ) }No puede llamar a un gancho en una función normal, debe llamarse desde un gancho o componente funcional.
export default function signin() La convención de nomenclatura anterior no se refiere a ninguno de los dos. Cambiar a Signin . Y, de hecho, el mensaje de error lo explica.
Ya tienes respuesta en tu error
Line 5:21: React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks debe cambiar el nombre del componente con Signin