Recibo este error anterior pero estoy pasando accesorios al componente; No puedo entender cuál es el problema aquí. He estado usando React por un tiempo, pero estaba usando clases y también quería intentar usar componentes de funciones. Deberían ser técnicamente iguales, sin embargo, según tengo entendido, solo que no necesita usar this.props y solo puede acceder a los accesorios.

Estoy usando los componentes en la página 'Sociales', usando el método de enrutamiento a continuación: (Recibo este error en "/", donde se supone que el componente no debe cargarse. No estoy seguro de si esto está causando el error, porque no me he encontrado con este tipo de problema.)

 <div className = "appBody"> <Router basename={process.env.PUBLIC_URL}> <Routes> <Route path="/" element={Home} exact/> <Route path="" element={Home} exact/> <Route path="/About" element={Home}/> <Route path="/Games" element={Home} /> <Route path="/Software" element={Home} /> <Route path="/Art" element={Home} /> <Route path="/Writing" element={Home} /> <Route path="/Socials" element={Socials} /> </Routes> </Router> </div>

Aquí está el componente que estoy usando:

 const SocialCard = (props) => { console.log(props.title); return ( <Card sx={{ minWidth: 275 }}> <CardContent> {/*Add icon here later*/} <Typography sx={{ fontSize: 16 }} color="text.secondary" gutterBottom> {props.title} </Typography> <Typography variant="h5" component="div"> {props.handle} </Typography> </CardContent> {props.hasLink == true && <CardActions> <Button size="small" onClick = {() => openURL(props.url)}>View</Button> </CardActions>} </Card> ); } export default SocialCard();

Aquí le he pasado los accesorios al componente como ejemplo.

 <Grid item xs={5}> <SocialCard title = {'email'} handle = {'example@gmail.com'} hasLink = {false}/> </Grid> <Grid item xs={5}>